Angular 2中的模板驱动表单
看看Angular 2 (beta.0)中模板驱动表单与模型驱动表单的优缺点，我想知道如何使用模板驱动表单将自定义验证附加到简单的文本输入字段。这种方法没有可用的示例(除了required之外)，或者我找不到它们。
<form #f="ngForm">
<label for="name">Name</label>
<input type="text" ngControl="name" [(ngModel)]="obj.name" #name="ngForm">
<button type="button" (click)="save()">Save</button>
</form>作为验证函数的示例：
validate(control:Control):ValidationResult {
if (control.value === 'Monkey') {
return { invalidName: true }
}
}上面的验证函数在使用FormBuilder的模型驱动表单中工作。如何使用模板驱动的方法来实现这一点？
这样的回答：“这是不可能的，也不会在未来。”或者“这不是最佳实践，请使用模型驱动的方法。”再加上一场辩论对我来说就太好了。(我已经假设没有办法，但在网络上找不到证据，我更喜欢模型驱动的方法。)
回答 3
Stack Overflow用户
发布于 2016-07-09 23:34:44
在模板驱动的表单中，您需要为自定义验证器创建一个指令，并将其附加到输入元素，如html属性(与附加required属性的方式相同)。
您应该阅读这篇文章，了解如何为自定义验证器创建指令：http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html
Stack Overflow用户
发布于 2018-04-11 21:14:07
在模板驱动的froms中，您必须为自定义验证器创建指令，并将其用于模板元素。
这是我的指令文件，
validator.directive.ts
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
]
})
export class EqualValidator implements Validator {
constructor( @Attribute('validateEqual') public validateEqual: string,
@Attribute('reverse') public reverse: string) {
}
private get isReverse() {
if (!this.reverse) return false;
return this.reverse === 'true' ? true: false;
}
validate(c: AbstractControl): { [key: string]: any } {
// self value
let v = c.value;
// control vlaue
let e = c.root.get(this.validateEqual);
// value not equal
if (e && v !== e.value && !this.isReverse) {
return {
validateEqual: false
}
}
// value equal and reverse
if (e && v === e.value && this.isReverse) {
delete e.errors['validateEqual'];
if (!Object.keys(e.errors).length) e.setErrors(null);
}
// value not equal and reverse
if (e && v !== e.value && this.isReverse) {
e.setErrors({
validateEqual: false
})
}
return null;
}
}Stack Overflow用户
发布于 2019-11-05 18:53:51
模板驱动的表单非常容易使用。但是，随着应用程序大小的增加，处理所有验证变得越来越复杂。顾名思义，模板驱动表单的所有代码，它的验证主要是在html模板上完成的，所以模板代码增加了。而在React Forms/Model driven的情况下，您只需要在typescript中配置您的控制字段。因此，这两种方法都很好，都有自己的优点，所以根据需求，应该从另一种方法中选择一种。
https://stackoverflow.com/questions/34903207
复制相似问题
腾讯云开发者
