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

user_14727392 0
Viewed 2189

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

enter image description here

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>
angular-reactive-forms angular10 angular typescript
2 Answers

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.

user_127479500

You can try with [formControl]="id" which is easily able to get values from Input tag.

user_136853910
Related