Html 输入字段或帮助文本不'；当字段无效时，t变为红色

我曾经用bootstrap3实现一个角度为2/4的应用程序，并使用反应式表单方法。我进行了一次字段验证，输入字段的边框变为红色，字段下以红色字体显示错误消息

看起来是这样的：

<div class="form-group row"
                [ngClass]="{'has-error':    (sourcesForm.get('sourceName').touched || 
                                            sourcesForm.get('sourceName').dirty) && 
                                            !sourcesForm.get('sourceName').valid }">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" />
                    <span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>

源名称
请输入源名称。
源名称必须超过3个字符。
源名称太长。

---

现在我必须使用Bootstrap4，错误消息或输入字段都不会变为红色。我如何认识到这一点？我试图将父span块的类更改为“form text”，但没有成功。

对于Bootstrap v4的beta版，您可以签出。在那里，您可以阅读所有现代浏览器支持的HTML5表单有效/无效css类验证新方法。引导程序使用

。已验证的
和
无效的反馈
类来实现您想要实现的目标（请参阅代码片段）



姓
城市
请提供一个有效的城市。
提交表格
//示例starter JavaScript，用于在存在无效字段时禁用表单提交
（功能（）{
“严格使用”；
addEventListener（“加载”，函数（）{
var form=document.getElementById（“需要验证”）；
表单。addEventListener（“提交”，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（“已验证”）；
}，假）；
}，假）；
}());
对于Bootstrap v4的测试版，您可以查看。在那里，您可以阅读所有现代浏览器支持的HTML5表单有效/无效css类验证新方法。引导程序使用
。已验证的
和
无效的反馈
类来实现您想要实现的目标（请参阅代码片段）



姓
城市
请提供一个有效的城市。
提交表格
//示例starter JavaScript，用于在存在无效字段时禁用表单提交
（功能（）{
“严格使用”；
addEventListener（“加载”，函数（）{
var form=document.getElementById（“需要验证”）；
表单。addEventListener（“提交”，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（“已验证”）；
}，假）；
}，假）；
}());
这是解决方案：

<div class="form-group row">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            [ngClass]="{'is-invalid':    (sourcesForm.get('sourceName').touched || 
                                sourcesForm.get('sourceName').dirty) && 
                                !sourcesForm.get('sourceName').valid }"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" >
                    <span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>


源名称
请输入源名称。
源名称必须超过3个字符。
源名称太长。

我需要将
[ngClass]
放入
输入
-标记中。然后我必须将类定义为
无效
，并将父span类设置为
无效反馈
这是解决方案：

<div class="form-group row">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            [ngClass]="{'is-invalid':    (sourcesForm.get('sourceName').touched || 
                                sourcesForm.get('sourceName').dirty) && 
                                !sourcesForm.get('sourceName').valid }"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" >
                    <span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>


源名称
请输入源名称。
源名称必须超过3个字符。
源名称太长。

我需要将
[ngClass]
放入
输入
-标记中。然后，我必须将类定义为
无效
，并将父span类设置为
无效反馈
我知道您的问题已经很久了，但这是通过反应式表单技术和引导4显示验证来验证表单控件输入字段的最佳方法。首先，您需要为表单编写一些代码：
在html部分：

 <form [formGroup]="myForm">
  <div class="form-group">
   <label for="name">first Name: </label>
   <input type="text" class="form-control" formControlName="firstName" id="name">
   <div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
   <div *ngIf="firstName.errors.required">filling name is required!</div>
   </div>
  </div>

现在您可以看到验证正在工作。现在，要为输入字段指定样式以显示无效输入周围的红色边框，只需转到组件的css文件并将此类添加到css文件：

 .form-control.ng-touched.ng-invalid{border:2px solid red;}

您可以简单地看到结果。
我知道您的问题很久以前就提出了，但这是通过反应式表单技术和引导4显示验证来验证表单控件输入字段的最佳方法。首先，您需要为表单编写一些代码：
在html部分：

 <form [formGroup]="myForm">
  <div class="form-group">
   <label for="name">first Name: </label>
   <input type="text" class="form-control" formControlName="firstName" id="name">
   <div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
   <div *ngIf="firstName.errors.required">filling name is required!</div>
   </div>
  </div>

现在您可以看到验证正在工作。现在，要为输入字段指定样式以显示无效输入周围的红色边框，只需转到组件的css文件并将此类添加到css文件：

 .form-control.ng-touched.ng-invalid{border:2px solid red;}

您可以简单地看到结果。
这是引导程序4的alpha版本，我使用的是beta版本，
has danger
类不包含在其中。这就是证据。我用
text danger
成功地获得了红色文本，但输入字段的边框仍然没有重做。更新了我的答案以支持测试版。抱歉，但我仍然不明白，我将
有错误
替换为
已验证
和
无效反馈
，但它仍然不起作用。使用
无效反馈
，输入消失。我解决了它，我需要将
[ngClass]
放入
输入
-标记中。然后我必须将类定义为
i