リフォーム - 私は、ボタンをキャンセルし、Submitを有する反応形式持っキャンセル

Question

に検証をスキップ： - すべての良い私はに提出（ストア）ボタン検証キックをクリックした場合

<button (click)="cancel($event)" type="button" class="ui button">Cancel</button> 
<button [disabled]="..." type="submit" class="ui button primary">Store</button> 

となりましたが。しかし、[キャンセル]をクリックすると、検証が開始されます。なぜだろう？私はキャンセルの検証は必要ありません。それをオフにするには何をする必要がありますか？

Answer 1

CancelボタンをクリックするとFormGroupを再初期化します。これにより、フォームが完全に消去され、すべての入力ステートが再び元気になります。入力状態を使用して、それらが使用されていないかどうかを確認する必要があります。まだ使用されていないフォーム入力で検証が実行されないようにします。

コンポーネント

constructor() { 
    this.Form = initForm(); 
} 

initForm() { 
    return this._FormBuilder.group({ 
     fieldOne: ['', Validators.required] 
    }) 
} 

入力

<div class="ui input" [class.error]="Form.get('fieldOne').dirty && !Form.get('fieldOne').valid"> 
    <input type="text" placeholder="Search..." formControlName="fieldOne"> 
</div> 

ボタン

<button (click)="initForm()" type="button" class="ui button">Cancel</button> 

P.S.あなたがセマンティックUIを使用しているように見えるので、私のHTMLはそれに応じてフォーマットされます。もしそうでなければ、それを少し再加工する必要があります。

Answer 2

親のformControlを[リセット]ボタンクリックで簡単に「リセット」することができます。これが問題なければ、formGroupをキャンセルしてください。

cancel() { 
this.form.reset(); 
}