我正在尝试使用FormBuilder
中的@angular/forms
创建一个Reactive表单,但我偶然发现了一个关于自定义验证@Directives,@ Inputs和FormBuilder
的案例。
在下面的代码中,我有自定义的MatchValidator指令,问题是,在定义FormGroup
时,如何为@Input变量赋值?
// My custom Directive
@Directive( {
selector: "[cw-match]",
providers: [ { provide: NG_VALIDATORS, useExisting: MatchValidator, multi: true } ]
} )
export class MatchValidator implements Validator,OnChanges {
@Input() matchTo; // <— How to assign values to this properties using formBuilder?
@Input() control;
ngOnChanges( changes:SimpleChanges ) {
this.control.control.updateValueAndValidity( false, true );
}
validate( control:AbstractControl ):{ [ key:string ]:any; } {
if( !control.value ) return null;
return ( control.value === this.matchTo )? null : { "matchError": true };
}
}
// My component
@Component( /*… */)
export class UserDetailsComponent implements OnChanges, AfterViewInit {
constructor( formBuilder: FormBuilder ){
this.userDetailsForm = this.formBuilder.group( {
slug: [ "", SlugValidator ],
basicCredentials: this.formBuilder.group( {
username: [ "", Validators.required ],
password: [ "", MatchValidator ], // <— How can I assign the matchTo and control values the @Input properties of the directive asks for?
repeatPassword: [ "" ],
} )
} );
}
}
是否可以使用FormBuilder分配验证@Directive的@Input值?
提前致谢:)
答案 0 :(得分:1)
你做不到。 @Input
属性旨在专门用于模板绑定,而不是以您希望的方式从代码中使用。
编辑:此外,angular实际上并不期望验证程序可以根据验证的值以外的其他内容“改变主意”,因此即使有办法在表单构建器中指定它无论如何它都不应该正常工作。