値が空の場合にformGroupの値を更新します。

Question

私は、フォームコントロールの量が変化するフォームを持つ角度のあるプロジェクトを持っています。これは私のテンプレートの外観です：

<form [formGroup]="updateValuesForm"> 
    <div *ngFor="let controlName of updateValuesForm.controls | keys"> 
     <input [formControlName]=controlName type="text"> 
    </div> 
</form> 

これは期待どおりに動作します。私は今、次の実装を試みています： コントロール値が空の場合、値は に変更する必要があります。この値はフォームに表示しないでください（エンドユーザーはこれが意味することを理解できません）。 Angular形式でも可能ですか？

Answer 1

これを試してください。空のときに入力の値を変更するのではなく、フォームの送信時にデータの値を変更するだけです。これにより、ユーザに が表示されなくなります。

HTML

<form [formGroup]="updateValuesForm" (ngSubmit)="submitForm(updateValuesForm.value)"> 
    <div *ngFor="let controlName of updateValuesForm.controls | keys"> 
     <input [formControlName]=controlName type="text"> 
    </div> 
</form> 

活字体

submitForm(data: any) { 

    for (var value in data) { 
     if (!data[value]) { 
      data[value] = ' '; 
     } 
    } 

    // Handle Form Submission 

}