Angular2テンプレート駆動型：カスタムフォームコントロールのフィールド検証を作成する方法は？

Question

エラーを処理するカスタムフォームコントロールを作成します。これは、このコンポーネントの内部にエラーを表示することを意味します。私はControlValueAccessorを実装するコンポーネントを作成しました。私はこの形式のエラーフォームを読むことができます：form.controls.myfieldname.errors.aErrorNameだから、form.controls.myfieldnameを私のconstomコントロールに渡します。

カスタムフォームコントロールのフィールド検証を作成するより良い方法はありますか？

私のカスタムコントロール：

@Component({ 
    selector: 'input-text2', 
    templateUrl: './input-text2.component.html', 
    styleUrls: ['/input-base2.scss', './input-text2.component.scss'], 
    providers: [ 
     { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: InputText2Component } 
    ] 
}) 
export class InputText2Component implements ControlValueAccessor { 
    // The control field: form.controls.fieldname 
    @Input() field; 

    @Input() label: string; 
    @Input() errorMessage: string; 

    value: string; 
    valueChange: (value: any) => void; 
    _onTouched: (value: any) => void; 


    writeValue(value: any): void { 
     this.value = value; 
     this.createClasses(this.size); 
    } 

    registerOnChange(fn: (value: any) => void): void { 
     this.valueChange = fn; 
    } 

    registerOnTouched(fn: (value: any) => void): void { 
     this._onTouched = fn; 
    } 

} 

レイアウト：

<div *ngIf="field?.errors && field?.touched"> 
    invalid 
</div> 

フォーム：

<form novalidate #form="ngForm"> 
    <input-text2 [field]="form.controls.fieldname" name="fieldname" errorMessage="My error message" label="My label" [(ngModel)]="model" 
     custom-validator> 
    </input-text2> 
</form> 

Answer 1

は、だから、私は私のコントロールにこれを追加答え

が見つかりました：

private ngControl: NgControl; 

constructor(private injector: Injector) { 

} 

ngOnInit(): void { 
    this.ngControl = this.injector.get(NgControl); 
} 

ngControlは、基本的に私のfieldプロパティと同じです。次に、fieldを完全に削除して、ngControlと置き換えることができます。