Angular：使表单值只读变灰，数据 Getter 对 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，它也应该获得禁用控件的值。

Answer 2

您可以尝试使用 [formControl]="id"，它可以很容易地从 Input 标签中获取值。

Angular：使表单值只读变灰，数据 Getter 对 Typescript 有效

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

typescript

angular

angular-reactive-forms

angular10