如何使用Reactive Forms分配@Directive的@Inputs

时间:2018-04-30 03:56:47

标签: angular angular2-directives angular-reactive-forms

我正在尝试使用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值?

提前致谢:)

1 个答案:

答案 0 :(得分:1)

你做不到。 @Input属性旨在专门用于模板绑定,而不是以您希望的方式从代码中使用。

编辑:此外,angular实际上并不期望验证程序可以根据验证的值以外的其他内容“改变主意”,因此即使有办法在表单构建器中指定它无论如何它都不应该正常工作。