完整表单的 Angular 2 表单验证工作

Question

我创建了一个表单，需要 2 个字段，这是我的验证类

   .ng-invalid {
  border:1px solid #a94442;  
  background:#fafbee;
}

这将无法正常工作。

这是我的 html 代码

<form #form="ngForm" novalidate>
            <div class="form-horizontal">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Title</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Title" name="Title" #Title>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">First name</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.FirstName" name="FirstName" required #FirstName>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Last name</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.LastName" name="LastName" required #LastName>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Telephone</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Telephone" name="Telephone" #Telephone>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Fax</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [ngModel]="contactObj.Fax" name="Fax" #Fax>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Mobile</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Mobile" name="Mobile" #Mobile>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group ">
                            <label class="col-sm-5 control-label">Email</label>
                            <div class="col-sm-7">
                                <div class="input-group ig-btn">
                                    <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Email" name="Email" #Email>
                                    <span class="input-group-addon">
                                        <button class="btn btn-primary">Send</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Date of birth</label>
                            <div class="col-sm-2">
                                <input type="checkbox" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.DOB" name="DOB" #DOB>

                            </div>
                            <div class="col-sm-5">
                                <select class="form-control">
                                    <option>12/10/1976</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 coment">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Comment</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Comments" name="Comments" #Comments></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <div class="form-group gap-bottom0">
                            <div class="col-sm-12 text-right">
                                <button class="btn btn-primary" (click)="SaveContact(contactObj,form)" [class.hidden]="ViewContactDisable"> OK</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>

和输出看起来像这样

我只希望它适用于 2 个特定字段，而不是所有表单。 所以请指导我正确的方法来做到这一点

Answer 1

您正在使用.ng-invalid 类，当表单无效时也适用于表单。所以删除.ng-invalid 并使用新的.invalid 类名，见我的例子。并将该类用于您希望在该表单控件周围显示无效边框的每个表单控件。

这样您可以为单个表单组件添加边框。

模板驱动表单方式：

 .invalid {
      border:1px solid #a94442;  
      background:#fafbee;
    }

<input #email="ngModel" name="email" [class.invalid]="!email.valid && email.touched" type="email" ngModel required pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
     {{email.valid}}

另一种方式，你可以这样做：这是动态/反应形式的方式。

<div class="form-group" [ngClass]="{'has-error':!complexForm.controls['firstName'].valid && complexForm.controls['firstName'].touched}">
        <label>First Name:</label>
        <input class="form-control" type="text" placeholder="first Name" [formControl]="complexForm.controls['firstName']">
      </div>

onSubmit检查验证

<h1>Employee Form</h1>
<form #myForm="ngForm" (submit)="formSubmit(myForm)" novalidate>
    <div>
        <div>
            <input id="nameInput" type="text" name="name"
                   ngControl="name"
                   required
                   minlength="2"
                   maxlength="35"
                   [(ngModel)]="person.name" />
        </div>
    </div> 
    <div>
      <button type="submit">Submit</button>
    </div>
    <div style="color: red">{{validationMessage}}</div>
</form>

在你的组件类中

validationMessage: string;

constructor() {

    this.validationMessage = "";
}

formSubmit(myForm: ControlGroup) {
    if (myForm.valid) {
      this.validationMessage = "Form Is Valid";
    }
    else
    {
      this.validationMessage = "Form Is Not Valid";
    }
}