Question

欢迎使用Angular和最后一个Angular2的每个人。

我现在正在使用表单，我发现我使用自定义验证（例如：native email validation不支持非拉丁语符号，或者我们需要电话验证或其他内容）和[(ngModel)]而不是ngControl和Validators。

那么，如果我们可以在构造函数中定义ngForm，为什么我们需要将FormBuilder与Object一起使用？

简单示例：

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"，其中<form>出现在HTML [formGroup]="myFormGroup"标记上。

在模型驱动的方式中，您通常不会看到它，而是在<form>标记上看到#myForm='ngForm'。但是即使你没有明确的引用，ngForm仍然存在。

您可以在模型驱动的世界中使用myForm.submitted，主要是因为HTML可以使用<form #myForm="ngForm" [formGroup]="myFormGroup" (ngSubmit)="go()">来决定何时显示验证错误。在这种情况下，代码将同时具有：public class T { CSVWriter out = null; private void write(String[] values) throws IOException { out.writeNext(values); } public static void main(String[] args) throws IOException { File f = new File("s.csv"); FileOutputStream os = new FileOutputStream(f, false); CSVWriter out = new CSVWriter( new BufferedWriter( new OutputStreamWriter( os, "UTF-8"))); } }

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

3 个答案: