カスタムフォームコントロールの有効な値にアクセス

Question

パスワードフォームコントロールを表すカスタムコンポーネントを作成しました（以下のコードは簡略化されています）。

PasswordComponent（HTML）

<form [formGroup]="passwordForm"> 
    ... 
    <input formControlName="password" type="password"> 
</form> 

PasswordComponent（TS）

... 
@Component({ 
    selector: 'password', 
    templateUrl: './password.component.html', 
    styleUrls: ['./password.component.css'], 
    providers: [{ 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => PasswordComponent), 
    multi: true 
    }] 
}) 
export class PasswordComponent implements ControlValueAccessor { 

    passwordForm: FormGroup; 
    onChange = (password: string) => { }; 
    onTouched =() => { };     

    constructor() { 
    this.passwordForm = new FormGroup({ 
     ... 
     password: new FormControl('') 
    }); 

    this.passwordForm.valueChanges.subscribe(data => this.onChange(this.value)); 
    } 

    get value(): string { 
    return this.passwordForm.get('password').value; 
    } 

    writeValue(password: string): void { 
    this.passwordForm.get('password').setValue(password); 
    this.onChange(this.value); 
    } 

    registerOnChange(fn: any): void { this.onChange = fn; } 

    registerOnTouched(fn: any): void { this.onTouched = fn; } 

    setDisabledState?(isDisabled: boolean): void { } 
} 

Iの代わりに標準の入力要素の他の構成要素にそれを使用する：

<form [formGroup]="userForm"> 
    ... 
    <password formControlName="password"></password> 
</form> 

バリが外から来ていますフォーム（PasswordComponent内では定義されていません）

this.userForm = fb.group({ 
    ... 
    password: ['', [Validators.minLength(10), Validators.maxLength(100)]] 
}); 

私の質問は、<password>の要素の有効性をPasswordComponentの中からどのように得ることができますか？私は妥当性に基づいてそれを様式化したいと思います。言い換えれば、このコントロールを表すPasswordComponentからuserFormの 'password'コントロールの有効性をどのように得ることができますか。

Answer 1

DIシステムからNgControlインスタンスを直接取得することはできません。循環依存エラーが発生するためです。我々はカスタム値アクセサにNgControlを注入した場合、それはなぜ起こるか次の図は示しています

今では私たちは、あなたがInjectorへを活用することができ、それを回避するにはNgControl -> FormControlName -> ValueAccessor -> CustomValueAccessor -> NgControl循環依存関係に

を持っていることは明らかですそれを達成：

component.ts

import { NgControl } from '@angular/forms'; 
export class PasswordComponent implements ControlValueAccessor { 
    ... 
    ngControl: NgControl; 

    constructor(private inj: Injector) { 
    ... 
    } 

    ngOnInit() { 
    this.ngControl = this.inj.get(NgControl) 
    } 

template.html

{{ ngControl.control.valid }} 

Plunker Example