Angular: Make Form Values ReadOnly Greyed Out And Data Getter Valid with Typescript

Question

Is there anyway to make a form greyed out readonly, While making the form values acquirable?

1/This will not work control.disable() in Typescript, as I cannot acquire the values of Id, Name, Description afterwards.

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 will not see values for three above

console.log(this.roleForm.value)

2/ Using only Fieldset will make the values greyed out AND acquirable. *I am trying to control this functionality with Typescript, and Not 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>

Answer 1

You may not be able to get the values of disabled form control with formgroup.value. But you can try formGroup.rawValue which is supposed to get the values of disabled controls too.