Angular:使用 Typescript 使表单值只读变灰并使数据获取有效

Question

有没有办法让表单以只读方式变灰，同时使表单值可获取？

1/这在 Typescript 中将无法使用 control.disable()，因为之后我无法获取 Id、Name、Description 的值。

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();

我不会看到上面三个的值

console.log(this.roleForm.value)

2/仅使用 Fieldset 将使值变灰并可获取。*我正在尝试使用 Typescript 而不是 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

您可能无法使用 formgroup.value 获取禁用的表单控件的值。但是您可以尝试 formGroup.rawValue，它应该也能获取禁用控件的值。