角2が必要です。

Question

角型のデフォルトの必要なバリデーターに苦労しています。 1つの入力フィールドと1つの送信ボタンを持つフォームがあります。入力フィールドが空の場合、ボタンも無効になります（バリデーターのため）。しかし、私がフィールドに何かを入力すると、私はボタンに直接押すことはできません、私は最初に入力フィールドに焦点を当てる必要があります。どうすればその行動を変えることができますか？

私は2つのファイルがあります：高度な

編集に

おかげ

• example.form.ts

• をexample.form.template.html

コード：.TSで

は私がformbuilderでフォームを作成ファイル：

exampleForm: Formgroup 
constructor(protected pb: Formbuilder){ 
    this.exampleForm = fb.group({ 
    name: ['', Validators.required] 
    }); 
} 

get isFormValid: boolean { 
    return this.exampleForm.valid; 
} 

テンプレート：

<form [formGroup]="exampleForm"> 
    <input type="text" formControlName="name"> 
    <button type="submit" [disabled]="!isFormValid" id="save-button">Submit</button> 
</form> 

Answer 1

限り、入力がフォーカスされると、フォームの検証が原因で失敗しますフォームが満たされていないことをフォームが知っている限り。

妥当性検査の方法で勝った場合の回避策はありません。 あなたが何か行うことができます空でないことをファイルを入力するあなたが気に唯一のものは、ある場合：Now]ボタンが提出された場合にのみ無効になります

<form [formGroup]="exampleForm"> 
    <input type="text" formControlName="name" [(ngModel)]="someName"> 
    <button type="submit" [disabled]="someName==''" id="save-button">Submit</button> 
</form> 

は空です。 より複雑なロジック（たとえば、いくつかの正規表現）では、カスタム検証メソッドを構築する必要があります。たとえば ：

isValidEmail(): ValidatorFn { 
    return (control: FormControl): string[] => { 
     if (!control || !control.value || control.value == "") 
     return null; 
     if (this.regexService.email.test(control.value)) 
     return null; 

     return ["Invalid email"] 
    }; 
    } 

、関連するコードを投稿formBuilder

に

initFormGroup() { 
    this.authenticateForm = this.formBuilder.group(
     { 
     email: ['', 
      this.isValidEmail() 
     ],   
     } 
    ); 
    }