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

大家好，使用Angular和最后一个Angular2的人

我现在正在处理表单，我看到我正在使用自定义验证（例如：不支持非拉丁符号，或者我们需要电话验证，或者其他东西）和

[（ngModel）]

而不是

ngControl

和

验证程序

那么，如果我们可以在构造函数中定义

对象

，为什么我们需要将

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
    }
  }
}

---

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

如果要使用自定义验证程序，则需要注册它

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;

---

我认为这对你很有用

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>

用户名*
需要用户名

萨姆比特数据

这个问题有点混乱，因为它假设

ngModel

与

ngForm

相反，后者不是真的（反正从Angular 4.1.3开始）。Angular中表单验证的两种方式是“模板驱动”（旧的

ngModel

way）和“模型驱动”（新的、被动的

FormBuilder

way）

“模板驱动”使用ngModel，但不使用FormBuilder。“模型驱动”使用FormBuilder，但不使用ngModel（与直觉相反）。两者都使用ngForm，因为它们都使用HTML标记

在使用任何一种格式时，都会以模板驱动的方式明确提到

ngForm

，其中

#myForm=“ngForm”

出现在HTML的

标记上

在模型驱动的方式中，您通常不会看到这一点，而是在

标记上看到

[formGroup]=“myFormGroup”

。但是ngForm仍然存在，即使您没有明确的引用它

---

您可以在模型驱动的世界中使用

#myForm='ngForm'

，主要是为了让HTML可以使用

myForm.submitted

来决定何时显示验证错误。在这种情况下，标签将同时具有两个属性：

是的，我们可以使用一些我们的

customFilter

，但是当我们检查表单数据时，例如国际电话号码：

它是空的吗
（我们需要向用户显示
“空字段错误消息”
，如果
它按长度有效吗
（未清除用户已键入的内容）出现错误
“您的手机几乎正确，请检查其长度”
，
格式是否有效，等等。我的意思是当我们在字段上有许多错误消息时。我们如何检查所有错误消息？并尽可能少写代码。是的，当我们使用
标记时，我们根本不需要使用
ngModel
。因为它可能会混淆我们应用程序的逻辑。
<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>