角度2检查多个输入字段的有效性

Question

我正在构建一个Angular 2应用程序，我正在使用一些角度2内置的验证，如 maxlenght，minlength和pattern 。所以在我的代码中我有2个输入字段，我这样验证。

 <div class="form-group form-group-sm">
    <label class="col-sm-5 control-label" for="firstname"
           [innerHtml]="'workorder.customer.user.firstname' | translate">Firstname:</label>

    <div class="col-sm-7">
        <input class="form-control" type="null-text" id="firstname" [(ngModel)]="user.firstName" #firstname="ngModel"
               minlength="2" name="firstname">


        <div [hidden]="firstname.valid || firstname.untouched" class="alert-danger">
            <div *ngIf="firstname.errors && firstname.errors.minlength">
                      <span [innerHtml]="'entity.validation.minlength' | translate:{min: 2}">
                                minimum 2 characters.
                      </span>
            </div>
        </div>

    </div>
</div>

<div class="form-group form-group-sm">
    <label class="col-sm-5 control-label" for="lastname"
           [innerHtml]="'smartwork3App.workorder.customer.user.lastname' | translate">Lastname:</label>

    <div class="col-sm-7">
        <input class="form-control" type="null-text" id="lastname" [(ngModel)]="user.lastName" #lastname="ngModel"
               minlength="2" name="lastname">


        <div [hidden]="lastname.valid || lastname.untouched" class="alert-danger">
            <div *ngIf="lastname.errors && lastname.errors.minlength">
                <span [innerHtml]="'entity.validation.minlength' | translate:{min: 2}">
                    minimum 2 characters.
                </span>
            </div>
        </div>

    </div>
</div>

这很好用。因此，如果我只键入1个字符，我将收到反馈，它至少需要2个字符。

但是当我点击按钮时，如何验证这样的多个字段。在按钮实际运行其功能之前，必须对它们进行验证。