Angular 4表单验证不起作用

我是angular 4的新手，这里我尝试在我的应用程序中实现angular表单验证消息

此处验证消息按预期显示，但文本字段和标签颜色不会根据状态进行更改

HTML:

<form #AddressForm="ngForm" (ngSubmit)="SaveAddress(mAddress_Model)">
   <div class="form-group" [class.has-error]="Name.invalid && Name.touched" [class.has-success]="Name.valid">
   <label for="FName" class="control-label" >First Name *</label>
   <input type="text" required minlength="4" id="Name" name="Name" class="form-control "  [(ngModel)]="mAddress_Model.mFName"  #Name="ngModel">
    <div class="help-block alert-danger col-sm-12" *ngIf="Name.errors.required && Name.touched">
                    * First name is required
    </div>
  </div>
</form>

名字*
*名字是必需的

此处

**[class.has error]=“Name.invalid&&Name.toucted”[class.has success]=“Name.valid”**

对我无效，但验证消息div正在工作

我关注这个博客

---

谁能帮我解决这个问题。

也许可以用这个来代替

[ngClass]="hasErros? 'some-class' : 'some-other-class'"

---

您可以修改输入标记并使用

[ngClass]

属性将输入标记边框线更改为红色或任何颜色，也可以对文本执行相同操作

<input [ngClass]="{'decorate-red' : !mAddress_Model.mFName && flag, 'decorate-regular' : mAddress_Model.mFName && !flag}" type="text" required minlength="4" id="Name" name="Name" class="form-control "  [(ngModel)]="mAddress_Model.mFName"  #Name="ngModel">

---

请提供。您是否使用浏览器开发工具检查过DOM？是否正在申请该课程？我在console@user184994中得到了这个，我认为它不是appliedRight，因此根据

has error

类的添加，它听起来好像没有添加样式。您正在使用引导？是的，我正在使用Index.html@user184994中的最新引导

.decorate-red {
   border: 1px solid red !important;
}