Question

我正在做一个嵌套的反应形式。当表单控件位于不同的组件中时，有一个open issue关于自动设置将字段标记为无效（红色）的类。

这些课程为mat-form-field-invalid和mat-input-invalid。

所以解决这个问题的想法是在单击提交按钮后从FormGroup获取无效控件，并在循环中将它们与无效控件/字段的formControlName匹配，并以编程方式将它们设置为无效< / strong>即可。

我尝试使用formData.form.controls['formControlName'].markAsTouched();和其他类似的＆＃34;解决方案＆＃34;我在这里找到并使用谷歌搜索，但其中任何一个都有效。

我该怎么办？

我使用Angular Material 5.2.4。

Answer 1

最后，我将CSS错误类添加到嵌套反应形式中无效的字段中：

 this.invalidControls(this.formGroup); //Call it just after submit the form

 //The implementation of the function
 invalidControls(name): void {
    for (const field in name.controls) {
      const control = name.get(field);

      if(control.constructor.name == "FormArray" || control.constructor.name == "FormGroup"){
        this.invalidControls(control); //If the AbstractControl is not a FormControl the funtion will be called again
      }
      else{
        if(control.status === "INVALID"){
          control.markAsTouched({ onlySelf: true });
          control.markAsDirty({ onlySelf: true });
        }
      }
    }
  }

因此，如果您将控件设置为无效，脏，并且为空，则会添加CSS错误类。否则不会。

角度材质2 - 手动将字段/控件设置为无效

1 个答案: