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

Question

大家好，使用Angular，最后Angular2.

我现在正在处理表格，我发现我正在使用自定义验证（例如：native email validation 不支持非拉丁符号，或者我们需要 phone验证，或其他）和 [(ngModel)] 而不是 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 中的两种表单验证方式是 "template-driven"（旧的 ngModel 方式）和 "model-driven"（新的反应式 FormBuilder 方式）。

"Template-driven" 使用 ngModel 但不使用 FormBuilder。 "Model-driven" 使用 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()">

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

Angular 2 - why do we need to use ngForm if we use custom validation?

javascript

validation

angular2-forms

angular