0

在我的角度应用程序中，我有一个包含一些字段的表单：输入、日期选择器、选择、...

首先，在 ngOnInit() 中，我初始化表单组，调用 initilizeForm() 函数，在该函数中创建了表单组，并设置了一些配置，例如禁用表单控件或其“默认”值。

然后，用户写入一些信息，然后我保存表单组数据。之后，我将表单重置为具有清晰状态的表单，然后再次调用 initializeForm 函数来设置默认值。但是，此时，该功能没有做任何事情，我不知道为什么。

在 OnInit 中初始化调用：

public formGroup: FormGroup;
ngOnInit() {
  this.initializeForm();
}

初始化函数：

this.formGroup = this.formBuilder.group({
      input1: [
        { value: '', disabled: true },
        [Validators.XX, Validators.YY]
      ],
      input2: [
        { value: '', disabled: false },
        [
         Validators.XX, Validators.ZZ
        ]
      ],
      select1: [
        { value: 'Value1', disabled: true },
        [Validators.XX]
      ]
//.... more fields
});

“保存”后重置表格

  public savedOk() {
    this.formGroup.reset();
    this.formGroup.enable();
    this.initializeForm();
  }

我不知道为什么当我在 ngOnInit 中调用初始化表单时，表单组会按预期创建，然后，如果我调用初始化表单，表单组不会显示具有该函数中设置的值的表单控件。select1 应该被禁用，并且应该选择 Value1 的选项。

可以使用 this.formGroup.get('fieldName').setValue('Value1') 和 .disabled() 解决，但我想为此使用初始化函数。

我正在使用 Angular 7 和 Angular 材料。

示例模板示例：

<form [formGroup]="formGroup">
<mat-form-field>
      <input matInput name="inputName" formControlName="inputName" required />
    </mat-form-field>

<mat-form-field>
    <mat-label>label</mat-label>
    <mat-select placeholder="label" formControlName="select1">
      <mat-option *ngFor="let op of options, trackBy: trackByFn" [value]="op.value">{{
                op.label |
                translate }}</mat-option>
    </mat-select>
  </mat-form-field>

</form>

查看更多信息，我认为我应该在保存时使用下一个：

   this.formGroup.reset({
      select1: { value: 'Value1', disabled: true }
    });
4

0 回答 0