[英]Reactive Forms check form fields empty or default and disable button Angular
[英]Angular => Reactive Forms : disable button when it encounters an empty input field
什么是響應式 Forms 禁用按鈕的方式,例如,在表單中遇到空輸入字段時?
所以換句話說,什么時候必須填寫所有字段才能啟用按鈕?
我確實知道對於 TemplateDriven 方式,它是這樣的:
<div class="row mt-5">
<div class="col-md-6 mx-auto">
<h2 class="text-center">Add Article</h2>
<div class="card mt-3">
<div class="card-body">
<form [formGroup]="articleForm" (ngSubmit)="addArticle()">
<div class="form-group">
<label>Title</label>
<input type="text" formControlName="title" [(ngModel)]="title" class="form-control"
[ngClass]="{ 'is-invalid': submitted && articleForm.controls.title.errors }"/>
<div *ngIf="submitted && articleForm.controls.title.errors" class="text-danger">
<div *ngIf="articleForm.controls.title.errors.required">Title is required</div>
<div *ngIf="articleForm.controls.title.errors.minlength">At least 3 characters</div>
<div *ngIf="articleForm.controls.title.errors.maxlength">Cannot exceed 10 characters</div>
</div>
</div>
<div class="form-group">
<label>Description</label>
<input type="text" formControlName="description" [(ngModel)]="description" class="form-control"
[ngClass]="{ 'is-invalid': submitted && articleForm.controls.description.errors }"/>
<div *ngIf="submitted && articleForm.controls.description.errors" class="text-danger">
<div *ngIf="articleForm.controls.description.errors.required">Description is required</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary col-md-4" [disabled]="!title || !description">Add</button>
<a [routerLink]="['/']">
<button type="submit" class="btn btn-primary col-md-4 ml-1">Back</button>
</a>
</div>
</form>
</div>
</div>
</div>
</div>
我們需要為輸入字段提供一個 [(ngModel)]:
[(ngModel)]="title"
[(ngModel)]="description"
然后在按鈕上,我們可以通過這種方式檢查事件:
[disabled]="!title || !description"
它確實有效。
但是我混合了 formControlName和ngModel ,這是不推薦的。 所以我想知道,如何使它以反應形式工作?
請好好照顧自己。
您可以刪除 ngModel。
如果表單無效,要禁用您的按鈕,您應該這樣做:
<button type="submit"[disabled]="articleForm.invalid">Add</button>
我假設您已在 ts 文件中放置了代碼,並且已放置了驗證器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.