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>

在Component类

中

validationMessage: string;

constructor() {

    this.validationMessage = "";
}

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

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

1 个答案: