如何从角度6的FormGroup中重置特定控件

Question

我通常在提交表单后使用FormGroup从FormGroup端获取数据.reset()方法将重置Controls中的所有值。

1）我的页面上有五个FormControl，但是我只想重设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'