Angular 提交时角度材料2嵌套形式验证

我试图在Angular 2中使用Angular材质和formGroup，但在不同组件中嵌套FormControl的输入验证方面存在问题

我的问题是：当提交表单时，只有第一个表单组中的输入得到表单已提交的通知

我创建了以下示例：

 @Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
  public myForm: FormGroup;

  constructor(private _fb: FormBuilder) {}

    ngOnInit() {
    this.myForm = this._fb.group({
      nested: this._fb.group({
           id: ['', Validators.required]
      }),
      id: ['', Validators.required],
    });
  }
}

我有一个简单的formGroup和一个嵌套的formController。这是我的HTML：

<form [formGroup]="myForm">
  <md-input-container>
    <input mdInput required formControlName="id">
  </md-input-container>
  <other-component [myFormGroup]="myForm" myFormGroupName="nested"></other-component>
  <button md-raised-button type="submit">Rechercher</button>
</form>

回收机

另一个组件只显示另一个输入

我做了一个小插曲来说明：

您可以注意到，如果我输入一个字段并立即退出，两个输入上都会出现红色错误行。但是，如果我不碰这两个输入中的任何一个，并单击submit，则只有非嵌套的输入才会加下划线。这是因为即使我将formGroup对象作为参数传递，嵌套对象也无法获取表单提交时的信息

你知道我该如何解决这个问题吗？如何使第一次输入了解提交的表单

---

多谢各位

Angular不会将

mat input invalid

类添加到嵌套控件中。让我们想想为什么

以下是

MdInputContainer

的类绑定的外观：

“[class.mat输入无效]：”\u mdInputChild.\u isErrorState'，

这是使您的边框变红的相应样式

.mat输入无效。mat输入波纹{
背景色：#f44336；//红色
}

如果您要研究如何计算

\u iErrorState

属性，您可以注意到它会检查

FormGroupDirective.submitted

属性

函数defaultErrorStateMatcher（控件，窗体）{
var/**@type{？}*/issubmitt=form&&form.submitted；在您的plunkr中，如果我单击“提交”而不单击其他任何内容，我会看到两个输入都用红色下划线。对我来说，plunkr没有编译，代码与您的问题不同……是的，很抱歉，我更新了我的plunkr，因为我的示例实际上正在工作。新的plunkr说明了我的问题，提交时的验证不起作用ng如果是嵌套组件Hanks Yurzui，这正是我想要的。这里的要点是，我需要将整个FormGroup对象传递给我的嵌套组件，而不是只传递子FormGroup对象。首先，我直接传递myForm.get（'nested'）作为我的另一个组件的一个参数，我的嵌套组件需要一个对整个formGroup对象的引用。