How to make angular input controls readonly from typescript?

Question

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
}

Are you trying to disable the input controls? It is not clear what exactly you are looking for. — Renjith P N
– Renjith P N, Commented Sep 20, 2020 at 12:43

Shivani · Accepted Answer · 2020-09-20 10:12:18Z

2

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.

answered Sep 20, 2020 at 10:12

Shivani

741 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MC Rio Over a year ago

I get the warning. It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors. Example: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) });

MC Rio Over a year ago

I have <mat-icon matChipRemove>cancel</mat-icon> to which I am unable to mention disabled(); It throws error.

Shivani Over a year ago

It is suggesting you to use disabled in the form control.You can try using FormControl({value: '' ", disabled: this.K.Field1}) where you define the form control in the component.For mat-icon you can add a class with pointer-events-none to make the it read-only.

ng-hobby · Accepted Answer · 2020-09-20 11:36:39Z

1

Try this:

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

answered Sep 20, 2020 at 11:36

ng-hobby

2,2092 gold badges17 silver badges27 bronze badges

1 Comment

izulito Over a year ago

Note that setting a form control as disabled will ignore the validators. In order to keep the validators and make it not editable, its better to use the readonly attribute

Collectives™ on Stack Overflow

How to make angular input controls readonly from typescript?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related