Question

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

首先，在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和角材料。

示例模板示例：

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

重置并在angular

0 个答案: