CODEWITHSUNDEEP
htmlangulartypescriptmaterial-ui
Shankar Babu
Shankar Babu

Reputation: 69

how to make Material-UI input text field "read only" in angular 12

I want to make a text field read-only so that text field should be non editable , I am using Material-UI. I have tried it making disabled in .ts file of the component

 this.firstFormGroup.controls['gauthan_nirmit'].disable();

but it does not post data back to server. The control should be read-only but it must send data back to server when submit is done

Upvotes: 2

Views: 2841

Answers (1)

Shankar Babu
Shankar Babu

Reputation: 69

Just add readonly attribute to the input field in component's .html file

<mat-form-field>    
<input matInput readonly number formControlName="gauthan_nirmit" placeholder="" maxlength="5" autocomplete="off" appBlockCopyPaste>
</mat-form-field>

It will make control read-only but control data will be sent to data when form is submitted

Upvotes: 1

Related Questions