Angular 2-如果使用自定义验证,为什么需要使用ngForm?

迈克·丹丹

各位使用Angular和最后一个Angular2的人大家好。

我现在正在使用表单,并且看到我正在使用自定义验证(例如:本机电子邮件验证不支持非拉丁符号,或者我们需要电话验证或其他方式),[(ngModel)]而不是ngControlValidators

那么,如果我们只能在构造函数中进行定义为什么还要使用ngFormwith呢?FormBuilderObject

简单的例子:

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或更多字段,而我们正在使用自定义验证,则很难维护此代码。

罗恩·纽科姆(Ron Newcomb)

这个问题有点令人困惑,因为它假设ngModel反对的说法ngForm是不正确的(无论如何,从Angular 4.1.3开始)。Angular中表单验证的两种方法是“模板驱动”(旧ngModel方法)和“模型驱动”(新的反应FormBuilder方法)。

“模板驱动”使用ngModel而不使用FormBuilder。“模型驱动”使用FormBuilder,但不使用ngModel(反直觉地)。两者都使用ngForm,因为它们都使用HTML标记<form>

关于ngForm使用哪种方法的唯一明确提及通常是通过模板驱动的方式找到的,该方式#myForm="ngForm"出现在HTML的<form>标签上。

以模型驱动的方式,您通常不会看到[formGroup]="myFormGroup"<form>标签,而是看到但是ngForm仍然存在,即使您没有明确引用它也是如此。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用自定义验证程序ng-valid类进行Angular 2表单验证

来自分类Dev

使用自定义验证程序ng-valid类进行Angular 2表单验证

来自分类Dev

如果我们使用 Angular 6,是否需要自定义客户端验证?

来自分类Dev

如何在Dart中使用Angular2实现自定义验证器?

来自分类Dev

使用ngFor处理自定义指令-Angular2

来自分类Dev

Angular 2 DI,使用自定义Http

来自分类Dev

在自定义 RadioButton 中使用 BehaviorSubject 的 Angular 2

来自分类Dev

带有参数的Angular 2自定义验证器

来自分类Dev

Angular 2-自定义验证器语法

来自分类Dev

Angular2自定义验证器未调用

来自分类Dev

Angular 2异步自定义验证器

来自分类Dev

Angular2自定义验证器未调用

来自分类Dev

Angular 2-自定义验证器语法

来自分类Dev

Angular 2 反应式表单自定义验证

来自分类Dev

需要使用 angular 2 访问和循环 json 数组

来自分类Dev

如果使用Meteor,为什么还要使用Angular?

来自分类Dev

使用Angular自动验证添加自定义验证

来自分类Dev

为什么Angular 2使用装饰器?

来自分类Dev

angular 2自定义指令OnInit

来自分类Dev

自定义管道在Angular 2中

来自分类Dev

消费angular 2自定义库

来自分类Dev

验证错误消息未显示为Angular 2中的自定义验证

来自分类Dev

验证错误消息未显示为Angular 2中的自定义验证

来自分类Dev

在Angular 2(RC5)中使用多个自定义模块

来自分类Dev

如何使用动态名称创建Angular 2自定义属性指令?

来自分类Dev

将自定义组件与Angular2结合使用时,JQueryUI Sortable无法正常工作

来自分类Dev

Angular2:使用自定义装饰器或批注将提供程序注入组件吗?

来自分类Dev

Angular2在自定义管道中使用基本管道

来自分类Dev

angular2 –通过自定义管道使用全局服务

Related 相关文章

  1. 1

    使用自定义验证程序ng-valid类进行Angular 2表单验证

  2. 2

    使用自定义验证程序ng-valid类进行Angular 2表单验证

  3. 3

    如果我们使用 Angular 6,是否需要自定义客户端验证?

  4. 4

    如何在Dart中使用Angular2实现自定义验证器?

  5. 5

    使用ngFor处理自定义指令-Angular2

  6. 6

    Angular 2 DI,使用自定义Http

  7. 7

    在自定义 RadioButton 中使用 BehaviorSubject 的 Angular 2

  8. 8

    带有参数的Angular 2自定义验证器

  9. 9

    Angular 2-自定义验证器语法

  10. 10

    Angular2自定义验证器未调用

  11. 11

    Angular 2异步自定义验证器

  12. 12

    Angular2自定义验证器未调用

  13. 13

    Angular 2-自定义验证器语法

  14. 14

    Angular 2 反应式表单自定义验证

  15. 15

    需要使用 angular 2 访问和循环 json 数组

  16. 16

    如果使用Meteor,为什么还要使用Angular?

  17. 17

    使用Angular自动验证添加自定义验证

  18. 18

    为什么Angular 2使用装饰器?

  19. 19

    angular 2自定义指令OnInit

  20. 20

    自定义管道在Angular 2中

  21. 21

    消费angular 2自定义库

  22. 22

    验证错误消息未显示为Angular 2中的自定义验证

  23. 23

    验证错误消息未显示为Angular 2中的自定义验证

  24. 24

    在Angular 2(RC5)中使用多个自定义模块

  25. 25

    如何使用动态名称创建Angular 2自定义属性指令?

  26. 26

    将自定义组件与Angular2结合使用时,JQueryUI Sortable无法正常工作

  27. 27

    Angular2:使用自定义装饰器或批注将提供程序注入组件吗?

  28. 28

    Angular2在自定义管道中使用基本管道

  29. 29

    angular2 –通过自定义管道使用全局服务

热门标签

归档