Search code examples
angularangular-materialangular6angular-forms

How to set the input field to invalid without using forms so that the bottom outline appears red based on a condition

The existing application does not have any forms used. I want to set the input field to invalid based on a condition in the component that if the user does not enter anything in the input, the bottom outline appears red when the condition is true to show the error on button click.

  <mat-form-field>
    <input matInput [(ngModel)] = "isavailable">
  </mat-form-field>

The existing application does not have any forms used, hence unable to to use something as below formData.form.controls['email'].setErrors({'incorrect': true}); //cannot use this as the app do not have any forms like formData.

Solution

  • You can set mat-form-field-invalid class manually based on the condition:

    <mat-form-field [ngClass]="{'mat-form-field-invalid': !isavailable}">
  <input matInput [(ngModel)]="isavailable">
</mat-form-field>