从组件内检查 Angular2 表单是否有效答案

【问题标题】：Checking whether an Angular2 form is valid or not from within the component从组件内检查 Angular2 表单是否有效
【发布时间】：2016-09-11 08:59:54
【问题描述】：

我正在尝试检查表单是否有效以防止进一步执行。

这是我的表格：

<form (ngSubmit)="updateFirstName(firstNameForm)" #firstNameForm="ngForm" novalidate>
    <div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)">
        <div class="input-group">
            <input type="text"
                   ngControl="firstName"
                   #firstName="ngForm"
                   required
                   minlength="2"
                   maxlength="35"
                   pattern_="FIRST_NAME_PATTERN"
                   [ngModel]="currentUserAccount?.firstName"
                   (ngModelChange)="currentUserAccount ? currentUserAccount.firstName = $event : null"
                   placeholder="{{'FIRST_NAME_FORM.NEW_FIRST_NAME'| translate }}"
                   class="form-control"/>
        </div>

        <div [hidden]="firstName.valid">
            <div *ngIf="firstName?.errors?.minlength" class="control-label">{{'FIRST_NAME_FORM.MIN_LENGTH'| translate}}</div>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary pull-right" [disabled]="buttonDisabled">{{'FIRST_NAME_FORM.SUBMIT'| translate}}</button>
        <a [routerLink]="['/dashboard/useraccount']" class="btn btn-link pull-right text-right">{{'FORM_CANCEL' | translate}}</a>
    </div>
</form>

但是，当我提交无效表单时，我在控制台中注意到NgForm 的有效属性是true...

 updateFirstName(firstNameForm) {
   console.log(firstNameForm);//the valid attribute of firstNameForm is true...
 }

谁能告诉我为什么会这样？

【问题讨论】：

pattern 在pattern_="FIRST_NAME_PATTERN" 中有一个额外的_ 是故意的吗？ formCtrl 是什么？ ng-class 应该是 [ngClass]
是的，我正在迁移一个 ng1 应用程序，我假设那些 pattern_ 和 ng-class 被忽略了。
是的，它们只是被忽略了。

标签： angular angular2-forms

【解决方案1】：

您正在制作模板驱动的表单。请参考这个简单的plunk

<h1>Employee Form</h1>
<form #personForm="ngForm" (submit)="personFormSubmit(personForm)" 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>

然后是控制器：

import { Component } from '@angular/core';
import { FORM_DIRECTIVES, ControlGroup, Control, Validators, FormBuilder, Validator, } from '@angular/common';
import 'rxjs/Rx';

export class Person {
    id: number;
    name: string;
}

@Component({
    selector: 'my-app',
    directives: [FORM_DIRECTIVES],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {

    person: Person;
    validationMessage: string;

    constructor() {
        this.person = new Person();
        this.validationMessage = "";
    }

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

}

如果您想转向更复杂的动态验证，那么最好转换为模型驱动的表单。就像这个plunk

【讨论】：

【解决方案2】：

这是预期的行为

我在 2.0.0-alpha.46 (2015-11-11) 的更改日志中找到

以前，ControlGroup 和 ControlArray 的 controlsErrors getter 返回其直接子级的错误。这令人困惑，因为结果不包括嵌套子项的错误（ControlGroup -> ControlGroup -> Control）。使 controlsErrors 包含此类错误将需要发明一些自定义序列化格式，应用程序必须理解这些格式。由于 controlsErrors 只是一种方便的方法，并且会引起混乱，因此我们将其删除。如果要将整个表单的错误序列化为单个对象，可以手动遍历表单并累积错误。这样您就可以更好地控制错误的序列化方式。

那么ControlGroup 和ControlArray 的文档应该更新

另见https://github.com/angular/angular/issues/6504#issuecomment-171950667

您可以检查firstNameForm.valid 是否为false，然后迭代控制组和控制错误。

NgForm 类具有 errors 属性，因为它继承自 AbstractControlDirective，但嵌套控件的错误不会在那里收集。

【讨论】：