Angular Material 2 提交时的嵌套表单验证

Question

我正在尝试将 Angular Material 与 Angular 2 中的 formGroup 一起使用，但我遇到了不同组件中嵌套 formControl 的输入验证问题。

我的问题是：提交表单时，只有第一个 formGroup 中的 input 收到表单已提交的通知。

我创建了以下示例：

 @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],
    });
  }
}

我有一个带有一个嵌套 formController 的简单 formGroup。这是我的 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>

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

我发了个图来说明一下：http://plnkr.co/edit/WR0cmVOhIfCdkqAVc8xX

您会注意到，如果我输入一个字段并立即退出，两个输入都会出现红色错误行。但是，如果我触摸两个输入的 none 并单击提交，则只有非嵌套输入会带有下划线。这是因为嵌套的无法获取表单已提交的信息，即使我将 formGroup 对象作为参数传递也是如此。

知道如何解决这个问题吗？如何让第一个输入知道提交的表单？

非常感谢！

Answer 1

Angular 不会将 mat-input-invalid class 添加到您的嵌套控件中。让我们想想为什么？

下面是 class 绑定 MdInputContainer 的样子：

'[class.mat-input-invalid]': '_mdInputChild._isErrorState',

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

.mat-input-invalid .mat-input-ripple {
    background-color: #f44336; // red
}

如果您调查 _isErrorState 属性的计算方式，您会注意到它会检查 FormGroupDirective.submitted 属性.

function defaultErrorStateMatcher(control, form) {
    var /** @type {?} */ isSubmitted = form && form.submitted; <----
    return !!(control.invalid && (control.touched || isSubmitted));
}

由于您正在创建两个 FormGroupDirective 指令，因此只会提交顶级指令。

您可以使用反应式 FormControlDirective

来解决这个问题

other.component.ts

@Component({
  selector: 'other-component',
  template: `
      <md-input-container >
        <input mdInput required [formControl]="control">
      </md-input-container>
  `
})
export class OtherComponent  {
  @Input() subname: string;
  @Input() formobj: any;

  control: FormControl;

  ngOnInit() {
    this.control = this.formobj.get([this.subname, 'id'])
  }
}

Plunker Example

Angular Material 2 提交时的嵌套表单验证

Angular Material 2 nested form validation on submit

validation

input

angular2-forms

angular-material2

angular