各位使用Angular和最后一个Angular2的人大家好。
我现在正在使用表单,并且看到我正在使用自定义验证(例如:本机电子邮件验证不支持非拉丁符号,或者我们需要电话验证或其他方式),[(ngModel)]
而不是ngControl
和Validators
。
那么,如果我们只能在构造函数中进行定义,为什么还要使用ngForm
with呢?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或更多字段,而我们正在使用自定义验证,则很难维护此代码。
这个问题有点令人困惑,因为它假设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] 删除。
我来说两句