Что такое способ «Реактивные формы» для отключения кнопки, когда, например, в форме встречается пустое поле ввода?
То есть, другими словами, когда все поля должны быть выполнены для того, чтобы включить кнопку?
Я знаю, что для 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 , что не рекомендуется. Поэтому мне было интересно, как заставить его работать в Реактивной форме?
Пожалуйста, позаботьтесь о себе.