Отключить кнопку, если ввод неверен

Question

У меня очень длинная форма, но я хотел бы отключить определенную кнопку (в шаблоне, я не хочу делать это на компоненте), только если определенное поле пусто или имеет некоторые ошибки проверки, этоэто образец моей формы:

<form #myForm="ngForm">
  <div class="form-group">
    <label>Email</label>
    <input [(ngModel)]="email" #email="ngModel" name="my_email" type="text" class="form-control" required>
    <span *ngIf="email.errors?.required">
      This field is required
    </span>
  </div>
  <button [disabled]="myForm.email.errors?.required">Some action</button> 
</form>

Мне не нужна полная действительная форма, чтобы отключить эту кнопку, я просто хочу проверить, основываясь на значении этого конкретного ввода.

Как мне это сделать?что мне не хватает?

Answer 1

1 - переименуйте переменную шаблона #email в #emailInput или любое имя, отличное от «email», которое является именем свойства модели.

<input [(ngModel)]="email" #emailInput="ngModel" name="my_email" type="text" class="form-control" required>

2 - используйте переменную шаблона #emailInpunt всвойство disabled кнопки и в диапазоне, который показывает ошибки.

<button [disabled]="emailInput.errors?.required">Some action</button>

 <span *ngIf="emailInput.errors?.required">
    This field is required
 </span>

Полный код:

<form #myForm="ngForm">
  <div class="form-group">
    <label>Email</label>
    <input [(ngModel)]="email" #emailInput="ngModel" name="my_email" type="text" class="form-control" required>
    <span *ngIf="emailInput.errors?.required">
      This field is required
    </span>
    <button [disabled]="emailInput.errors?.required">Some action</button> 
  </div>
</form>

Попробуйте его на Stackblitz