角度形式禁用提交按鈕，如果字段爲空

聽起來很簡單，但我已經嘗試了很多事情，沒有工作。角度形式禁用提交按鈕，如果字段爲空

我用角4，我的方式是模板驅動：

<form #form="ngForm" novalidate> 
    <label for="insz">{{ 'SEARCH_PAGE.searchInszNumber' | translate }}</label> 
    <input type="text" name="insz" [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required> 
    <button (click)="onSearch(input.value)" ><span>{{'SEARCH_PAGE.search' | translate }}</span></button> 
</form>

我想禁用按鈕時（唯一）輸入字段爲空。

來源

2017-06-28 gkri

你是在你輸入丟失ngModel，您輸入字段實際是一個表單控件：

<input type="text" name="insz" ngModel 
    [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>

，然後你需要禁用當然按鈕，如果形式是無效的：

<button [disabled]="!form.valid" (click)="onSearch(input.value)" >Submit</button>

來源

2017-06-28 14:13:38 Alex

謝謝。之前我曾嘗試過這種方式，但無法正常工作，所以我認爲'ngModel'不是必需的。然後我只注意到表單上的'novalidate'屬性... – gkri

'novalidate' btw在角4中不再需要，如果你使用的話。這實際上是用於禁用瀏覽器本機驗證。 – Alex

是的，我正在使用Angular 4！謝謝，也不知道。 – gkri

你可以看看reactive forms。直到一週前，我才知道它們，但它們非常強大！

這意味着您所需要做的就是在您的案例中添加一個Validator（Validators.required），併爲您的按鈕添加禁用條件。就是這樣，你就定了。

來源

2017-06-28 14:19:24 trichetriche

感謝您的推薦！這是一個相當簡單的形式，所以我認爲我應該使用模板驅動的模式，但我也會嘗試使用反應形式。 – gkri

我同意，他們是偉大的，但我會說這是在這種情況下，只有一個輸入字段:)矯枉過正。:) – Alex

它從來沒有矯枉過正。是的，使用它們有點困難，但是你必須編寫更少的代碼（在這種情況下，你只需要添加驗證器） – trichetriche

角度形式禁用提交按鈕，如果字段爲空

回答

相關問題