CODEWITHSUNDEEP
angular
MC Rio
MC Rio

Reputation: 3

How to make angular input controls readonly from typescript?

I have the following in HTML

  <mat-form-field [appearance]="matFormFieldAppearance" style="margin-left:10px;width:50%">
    <mat-label>Type</mat-label>
    <mat-select formControlName="TypeId" required>
      <mat-option *ngFor="let item of TypeList" [value]="item.Id">
        {{item.Title}}
      </mat-option>
    </mat-select>
  </mat-form-field>


  <mat-form-field [appearance]="matFormFieldAppearance" style="margin-left:10px;width:50%">
    <mat-label>Category</mat-label>
    <mat-select formControlName="CategoryeId" required>
      <mat-option *ngFor="let item of CategoryList" [value]="item.Category">
        {{item.Category}}
      </mat-option>
    </mat-select>
  </mat-form-field>

In TypeScript, MatDialog receives data and if Field1 is not null then, I want the form fields be put in ReadOnly

this.K = this.matdialogData;
if (this.K.Field1 !== null)
{
          this.myForm.controls.CategoryeId.ReadOnly(); //Something like this
          this.myForm.controls.TypeId.ReadOnly();//Something like this
}

Upvotes: 0

Views: 2361

Answers (2)

ng-hobby
ng-hobby

Reputation: 2199

Try this:

this.myForm.controls['CategoryeId'].disable();
this.myForm.controls['TypeId'].disable();

Upvotes: 1

Shivani
Shivani

Reputation: 64

You can disable the fields to make them read-only.

this.myForm.controls.CategoryeId.disable();
this.myForm.controls.TypeId.disable();

Also, you can add a class to mat-form-field with style pointer-events-none to make the fields read-only.

Upvotes: 2

Related Questions