2017-08-29 6 views
0

ボタンをクリックしてテキスト入力を追加できるフォームを作成しました。これらの入力の後ろにあるFormControlは、のFormGroupの内部に格納されています。Angular2 Reactiveフォーム、初期状態のFormControlデフォルト値

これらの入力にはデフォルト値を指定したいと思います。これらの入力は、元の状態であれば送信されます。ユーザーが入力の値を変更してダーティーに変更した場合、デフォルト値を送信または表示したくありません。

プレースホルダの属性は、入力が変更されていない場合にのみ、デフォルトの名前を表示しています。

<div 
    formArrayName="names" 
    *ngFor="let server of names.controls; let i = index; trackBy:trackByFn"> 
     <span>{{ i + 1 }}</span> 
     <input 
     type="text" 
     formControlName="{{i}}" 
     placeholder="{{defaultName}}"> 

</div> 

私は次の検証機能を作成して名前を確認するには、次の

ここで私は form.value[key]が唯一の文字列配列を返すよう、トラブル要素が汚れていたり、自然のままであれば、考え出すを持っていないです
export function validateServerName(form: FormGroup): ValidationErrors | null { 
    const names: string[] = form.value[CREATE_FORM_KEY_NAMES]; 

    for (const name of names) { 
     if (name.trim() === '') { 
      return { 
       invalidName: true 
      }; 
     } 
    } 

    return null; 
} 

FormControlの配列です。

私は達成しようとしていることを簡単に行う方法、またはフォームを適切に検証する方法を探しています。

+1

この変数にpristinetouchedを使用することができますが、' –

+0

あなたがformBuilderを使用しましたか? –

+0

フォームビルダーが存在しないときに作成された古いコードを使用している@RIYAJKHANはありません – Marv

答えて

1

触れた場合は、

を使用して制御状態を確認することができますが、その汚れ

this.form.get('controlname').touched 

と自然のままのためにあなたが

this.form.get('controlname').pristine 

UPDATE

のように確認することができます本当ですフォーム配列のためにそれはsomethiになります以下のようなNG

let val = this.user.get('<FormArray>') as FormArray; 
    console.log(val.at(index)); 

あなたは今、あなたは `form.get( 'コントロール名')を使用することができます

+0

あなたが答えを得るために役立ったFormArray内のコントロールにアクセスする必要がありますが、あなたの答えを受け入れるときの文脈は正しいです。 – Marv

+1

@Marvが更新されました。それは私が感じたことでした –

関連する問題