Is there a way to disable a form and make it greyed out, while still being able to access the values?
https://i.sstatic.net/wt2c3.png
1/ Disabling controls with
this.roleForm.controls['id'].disable()this.roleForm = new FormGroup({
id: new FormControl(this.singleRole?.id),
name: new FormControl(this.singleRole?.name),
createDate: new FormControl(this.singleRole?.createDate),
status: new FormControl(this.singleRole?.status)
});
this.roleForm.controls['id'].disable();
this.roleForm.controls['name'].disable();
this.roleForm.controls['createDate'].disable();
I won't be able to see the values for the three mentioned above.
console.log(this.roleForm.value)
2/ Utilizing a Fieldset will achieve the desired effect of greying out values but still allowing them to be accessed. *I am aiming to implement this functionality using Typescript rather than HTML.
<fieldset class="data-form" [disabled]="true">
<mat-form-field class="row" appearance="outline" floatLabel="always">
<mat-label>Id</mat-label>
<input matInput formControlName="id" [value] = "singleRole.id" >
</mat-form-field>
<mat-form-field class="row" appearance="outline" floatLabel="always">
<mat-label>Name</mat-label>
<input matInput formControlName="name" [value] = "singleRole.name" >
</mat-form-field>
<mat-form-field class="row" appearance="outline" floatLabel="always">
<mat-label>Created Date</mat-label>
<input matInput formControlName="createDate" [value] = "singleRole.createDate | date: 'MM/dd/yyyy'" >
</mat-form-field>
</fieldset>