2角度 - 動的コンポーネントテンプレート - デマンド

Question

にFormControlをクローニングするためにどのようにテーブルの下に、これまでのところ良い、

を動的データテーブルを実装し、そのいくつかの列の入力を含む行がありますユーザーは新しいレコードを追加することができます。追加された各行は編集可能です

私はインラインで行を編集するときに同じ検証が必要なので、FormControlをクローンする必要があります。

ここで私のコードで使用している定義の例です。私のデータテーブルコンポーネント（1列分）をインスタンス化するとき

..., 
{ 
    name: this.getTrad('Points'), 
    value: 'points', 
    width: 100, 
    type: DataTableComponent.INPUT, 
    editable:true, 
    numeric:true, 
    validationControl: 
    new FormControl({ value: '', disabled: false }, 
     [Validators.required, 
     Validators.minLength(1), 
     Validators.maxLength(100) 
    ]) 
}, 

FormControlをダイナミックに作成された入力に割り当てるにはどうすればできますか？ FormControlインスタンスをチェックしましたが、バリデータのアクセサーはありませんか？

これまでのところ、私が持っている唯一のアイデアは、誰もがより良いアイデアを持っている場合は、私のコンポーネントに各列のバリデータの配列の代わりに、FormControl

の全インスタンスを与えることです....

感謝

Answer 1

私はこの質問に直面しました。 formControlが注入AbstractControlと同じstateとvalidators有し、このアプローチでは

@Component({...}) 
export class FooDialogComponent { 
    formControl: FormControl; 

    constructor(@Inject(MAT_DIALOG_DATA) public data: { system: number, control: AbstractControl }, // TODO define interface 
      public dialogRef: MatDialogRef<UpdateQuantityDialogComponent>) 
    { 
    this.formControl = new FormControl(this.data.control.value, this.data.control.validator); 
    } 
} 

：私は、通常の新しいインスタンスを使用して、以下のユースケースを解決しました。

Ofcでは、コントロールのvalueがプリミティブ型でない場合は、（深い）コピーを実行する必要があります。

希望します。