Question

我是angular 4的新手，在这里，我试图在我的应用程序中实现angular form验证消息。

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

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.touched" [class.has-success]="Name.valid"**在这里对我不起作用，但是验证消息div在起作用。

我关注了这个博客http://csharp-video-tutorials.blogspot.com/2018/01/displaying-angular-form-validation.html

谁能帮我解决这个问题。

Answer 1

也许可以改用它？

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

Answer 2

您可以修改输入标签，并使用[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">

如果有错误，则将标志值分配为false，否则为true。

在CSS中添加

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

Angular 4表单验证不起作用

2 个答案: