Как добавить проверку для поля ввода в angular 7

Question

Я хочу включить кнопку после подтверждения ввода

<div>
    <mat-form-field>
      <mat-label>name</mat-label>
      <input matInput name="name" [(ngModel)] = "Name" required >
    </mat-form-field>
    <div *ngIf="name.errors?.required"> Name is required</div>
  </div>

<div>

    <button mat-button  class="primary-btn" (click)="closeDialog()"  [disabled]="disabled" >Save</button>
  </div>

Answer 1

Пожалуйста, найдите переработанный код, который соответствует вашим требованиям.

<form #form="ngForm">
    <mat-form-field>
      <mat-label>name</mat-label>
      <input matInput #name="ngModel" ngModel name="name" required >
    </mat-form-field>
    <div *ngIf="name.touched && name.invalid">
    <div *ngIf="name.errors.required"> Name is required</div>
    </div>
    <button class="primary-btn" (click)="closeDialog()"  [disabled]="form.invalid" >Save</button>  
  </form>

Ниже приведены скриншоты, помогающие понять вывод приведенного выше фрагмента.

Кнопка отключена, когда поле не заполнено

Кнопка включена, когда поле заполнено именем

Надеюсь, это помогло вам.

Посетите https://www.digital-lync.com/full-stack-training-in-hyderabad.html для получения дополнительной помощи.