角2需要驗證

我正在努力與角度形式的默認所需的驗證。我有一個帶有單個輸入字段和一個提交按鈕的表單。現在當輸入字段爲空時，該按鈕也被禁用（由於驗證器）。但是當我進入現場時，我無法直接按下按鈕，我首先失去了對輸入字段的關注。我怎樣才能改變這種行爲？角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>

來源

2017-02-06 bendajo

發佈的相關代碼.. –

什麼是「我不能直接按到按鈕」意味着什麼？你爲什麼不能？ –

@GünterZöchbauer如果焦點仍然在輸入字段上，則該按鈕被禁用，因此我無法按下按鈕來放大。我首先必須單擊該字段才能驗證是否輸入了某些內容，而不是我可以按現在啓用的按鈕。 – bendajo

只要輸入集中，形式驗證將失敗原因只要表格知道該字段沒有填寫。

解決方法是不使用你贏得驗證方法。如果你關心的唯一事情是申請將不爲空，你可以這樣做輸入：

<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"] 
    }; 
    }

和init validate方法在formBuilder

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

來源

2017-02-06 09:30:37

角2需要驗證

回答

相關問題