Angular 2 - 如果我们使用自定义验证，为什么我们需要使用 ngForm？

Question

大家好，使用 Angular 以及最后一个 Angular2。

我现在正在处理表单，我看到我正在使用自定义验证（例如：native email validation 不支持非拉丁符号，或者我们需要电话验证，或其他）和 @ 987654322@ 而不是 ngControl 和 Validators。

那么，如果我们可以在构造函数中定义Object，为什么还要使用ngForm 和FormBuilder？

简单示例：

ngForm:

import {FormBuilder, Validators, FORM_DIRECTIVES, AbstractControl, ControlGroup} from 'angular2/common';

@Component({
  selector: 'form',
  template: `<form [ngFormModel]="ourForm" (ngSubmit)="doSubmit()">
      <input ngControl="ourinput" placeholder="Our input" type="text">
      <span class="error-message" [class.hidden]="!error">{{message}}</span>
      <button>Submit</button>
    </form>`,
  directives: [FORM_DIRECTIVES]
})

export class someFormCmp {
  ourForm: ControlGroup;
  error: boolean;
  message: string;

  constructor(
    fb: FormBuilder
  ) {
    let some = this;

    some.ourForm = fb.group({
      ourinput: ['Something...', Validators.required]
    });
    some.error = false;
    some.message = '';
  }

  doSubmit() {
    let some = this;

    // our custom validation
    if (!valid(some.ourForm.controls['ourinput'].value)) {
      some.error = true;
      some.message = 'Field is not valid';
    }

    if (!error) {
      // some tasks what we'll do next
    }
  }
}

VS

ngModel:

@Component({
  selector: 'form',
  template: `<form (ngSubmit)="doSubmit()">
      <input [(ngModel)]="ourinput" placeholder="Our input" type="text">
      <span class="error-message" [class.hidden]="!error">{{message}}</span>
      <button>Submit</button>
    </form>`
})

export class someFormCmp {
  ourForm: any;
  error: boolean;
  message: string;

  constructor() {
    let some = this;

    some.ourForm = {
      ourinput: 'Something'
    };
    some.error = false;
    some.message = '';
  }

  doSubmit() {
    let some = this;

    // our custom validation
    if (!valid(some.ourForm.ourinput)) {
      some.error = true;
      some.message = 'Field is not valid';
    }

    if (!error) {
      // some tasks what we'll do next
    }
  }
}

如果有一个，两个，三个字段，没有太大的区别。但是如果有 6 个、10 个或更多字段并且我们使用自定义验证，则很难维护此代码。

Answer 1

如果你想使用自定义验证器，你需要注册它

some.ourForm = fb.group({
  ourinput: ['Something...', Validators.compose([
    Validators.required, myCustomValidator
  ])]
});

myCustomValidator 将如下所示：

myCustomValidator(control:Control) {
  if (isValid(control)) {
    return null;
  } else {
    return {
      someValidation: true
    }
  }
}

这样ourinput 控件将在内部自行处理输入状态。您无需在代码中显式调用它...

您可以使用valid 属性访问输入的有效性：

var isValid = some.ourForm.controls.outinput.valid;

Answer 2

我认为这对你有用。

ngForm，是设置验证格式的主要内容之一。

<form [ngFormModel]="samform" #f="ngForm">

<div class="form-row">
    <div class="formHeading">User Name *</div>
    <input type="text" ngControl="email" [(ngModel)]="Username" />

    <div *ngIf="email.touched && email.value==''" class="cmsg">
        <p *ngIf="email.errors.required">User Name is required.</p>
    </div>
 </div>
<button (click)="submitData()" [disabled]="!f.form.valid"
    class="btn btn-primary">Sumbit data</button>
</form>

Answer 3

这个问题有点混乱，因为它假设 ngModel 反对 ngForm 这不是真的（从 Angular 4.1.3 开始）。 Angular 中表单验证的两种方式是“模板驱动”（旧的ngModel 方式）和“模型驱动”（新的、反应式的FormBuilder 方式）。

“模板驱动”使用 ngModel 而不是 FormBuilder。 “模型驱动”使用 FormBuilder 但不使用 ngModel（违反直觉）。两者都使用 ngForm，因为两者都使用 HTML 标记 <form>。

ngForm 的唯一明确提及通常是在模板驱动的方式中，其中#myForm="ngForm" 出现在 HTML 的 <form> 标记上。

在模型驱动的方式中，您通常不会看到这一点，而是看到<form> 标记上的[formGroup]="myFormGroup"。但是 ngForm 仍然存在，即使您没有明确引用它。

您可以在模型驱动的世界中使用#myForm='ngForm'，主要是因为HTML 可以使用myForm.submitted 来决定何时显示验证错误。在这种情况下，标签将同时具有：<form #myForm="ngForm" [formGroup]="myFormGroup" (ngSubmit)="go()">