FormBuilderの入力値と別の入力値のバインド

Question

私はnameとmilestone入力のフォームを持っています。私のmilestoneの入力値はMilestone: + nameで、私のユーザーが名前を入力すると自動的に更新されるようにします。

私はこれを達成するためにngModelバインディングを使用しようとしています。

<!-- My name input --> 
<input mdInput [(ngModel)]="phaseName" formControlName="name" placeholder="Nom" required> 

そして、私のTSコンポーネントのコンストラクタで：

public phaseForm: FormGroup; 
phaseName: string; 

this.phaseForm = fb.group({ 
     'name': ['', Validators.required], 
     'milestone': ['Milestone: ' + this.phaseName, Validators.required] 
    }); 

しかし、マイルストーンのデフォルト値はコンストラクタで設定されているように、それは私のユーザーの種類名として更新されることはありません、私は何を追加する必要がありますか私の拘束力を達成するために行うのですか？

Answer 1

のように設定できます。 ngOnInit（）メソッドのinitフォームビルダの後。フォームグループ内で入力ボックスを使用できる場合は 。それはすでに二通りの方法です。 バインディングなので、値をバインドする必要はありません。フォームの値を取得する場合は、

for eg : const phaseFormValue = this.pahseForm.value; 
console.log(phaseFormValue.name); 

ngOnInit(): void { 
this.phaseForm.setValue({milestone:'Milestone: ' + this.phaseName}); 
} 

あなたは外の入力ボックスを使用することができます。このコードを試してください。

<input mdInput [(ngModel)]="phaseName" (keypress)="handleKeyboardEvent($event)" placeholder="Name"> 

//コンポーネント

@HostListener('document:keypress', ['$event']) 
    handleKeyboardEvent(event: KeyboardEvent): void { 
      this.phaseForm.setValue({milestone:'Milestone: ' + this.phaseName}); 
    }; 

Answer 2

Htmlの

<input mdInput formControlName="name" placeholder="Nom" required> 

* no need of ngModel 

コンポーネント

値

を取得するには

と変化を検出するあなたは、単一のプロパティに

this.phaseForm.valueChanges .subscribe(data => this.onValueChanged(data));

を行うことができ、あなたは

nameChangeLog: string[] = []; 
logNameChange() { 
    const nameControl = this.heroForm.get('name'); 
    nameControl.valueChanges.forEach(
    (value: string) => this.nameChangeLog.push(value) 
); 
} 

チェックのように行うことができます示唆したように、あなたが値を初期化することができますcookbook here

Shailesh Ladumorまたは によって初期化する場所 形。