Angular material 2 - 手动将字段/控件设置为无效

Question

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

这些类是mat-form-field-invalid和mat-input-invalid。

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

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

我该怎么做？

我正在使用 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 });
        }
      }
    }
  }

因此，如果您将控件设置为invalid、dirty，并且它是empty，则会添加 CSS 错误类。否则不行。