Angular: 禁用表单域并保持表单无效

Question

我有一个嵌入 formArray 的主窗体

  initForm() {
    this.mainForm = this.formBuilder.group({
      label: ['', [Validators.required, Validators.maxLength(this.labelMaxLength)]],
      foos: this.formBuilder.array([]),
    });
  }

foo 是一个子表单（另一个组件）：

  initForm() {
    this.subForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.maxLength(this.labelMaxLength)]],
      bar: new FormControl('',[Validators.required]),
    });
  }

在我的过程中，我需要暂时禁用条形字段，我执行的是：this.subForm.get('bar').disable();

正如预期的那样，该字段被禁用，并且不再考虑关联的验证器。

在我的例子中，我需要保留栏验证器，或者至少在禁用栏时将子表单设置为无效。

我尝试在子组件中做 this.subForm.setErrors({incorrect: true}); 但主表单认为 foos formArray 有效并允许表单提交...

感谢您的帮助，

Answer 1

bar是什么表单域？如果它是输入类型，您可以将其设置为只读而不是禁用它。这样你的验证器就可以工作了。

您也可以简单地检查栏是否被禁用，如果禁用则阻止表单提交。

Answer 2

在栏上显示错误的方式被禁用时，您应该为 FormGroup 创建验证器，如下所示：

this.subForm = this.formBuilder.group({
      name: ['', [Validators.required, ...]],
      bar: new FormControl('',[Validators.required]),
    }, { validator: [barValidation] });

并制作您的自定义验证器：

export const barValidation: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const bar = control.get('bar');
  return bar.disabled ? { 'bar is disabled': true } : null;
};

现在当栏被禁用时 FormGroup 无效。

Angular: 禁用表单域并保持表单无效

Angular: disable a formfield and keep form invalid

validation

angular

disable