forms - 如何在角度 6 中从 FormGroup 重置特定控件

Question

我FormGroup通常在提交表单后从 Frond 端获取数据，.reset()该方法通常会重置控件中的所有值。

1) 我的页面上有五个 FormControls，但我只想重置 4 个选项，其余 1 个应使用其已选择的值禁用。

2）想要摆脱 UI 看起来像的那个红线（错误类）：

到目前为止我尝试过的（如果 formControl 名称被brand禁用）：

ResetControls()方法：

  for (var name in this.form.controls) {
      if (name != 'brand') {
        this.form.reset();
        (<FormControl>this.form.controls[name]).setValidators(Validators.compose([]))
        this.form.controls[name].setErrors(null);
      }
      else
      {
       // var value = (<FormControl>this.form.controls[name]).value;
        (<FormControl>this.form.controls[name]).markAsPristine();
        (<FormControl>this.form.controls[name]).markAsUntouched();
       this.form.get('brand').disable();  

      }
    }

表单组：

this.form = new FormGroup({
      brand: new FormControl("", Validators.compose([
        Validators.required,
      ])),
      sku: new FormControl("", Validators.compose([
        Validators.required,
      ])),
      cRate: new FormControl("", Validators.compose([
        Validators.required,
      ])),
      pRate: new FormControl("", Validators.compose([
        Validators.required,
      ])),
      eDate: new FormControl("", Validators.compose([
        Validators.required,
      ])),
    });

3) 重置所有选项，但无法为每个控件应用现有的必填字段。

Answer 1

您必须传入与表单中的表单控件匹配的状态图。

const form = new FormGroup({

first: new FormControl('first name'),
  last: new FormControl('last name')
});

form.reset({
  first: {value: 'name', disabled: true},
  last: 'last'
});

console.log(this.form.value);  // {first: 'name', last: 'last name'}
console.log(this.form.get('first').status);  // 'DISABLED'