Angular 反应式表单提交不会触发对子组件的验证

问题描述

我有一个 Angular 表单，它由多个 InvalidArgumentError Traceback (most recent call last) /usr/local/lib/python3.7/dist-packages/tensorflow/python/framework/ops.py in _create_c_op(graph,node_def,inputs,control_inputs,op_def) 1879 try: -> 1880 c_op = pywrap_tf_session.TF_FinishOperation(op_desc) 1881 except errors.InvalidArgumentError as e: InvalidArgumentError: Negative dimension size caused by subtracting 2 from 1 for '{{node max_pooling3d_5/MaxPool3D}} = MaxPool3D[T=DT_FLOAT,data_format="NDHWC",ksize=[1,2,1],padding="VALID",strides=[1,1]](Placeholder)' with input shapes: [?,126,1,64]. During handling of the above exception,another exception occurred: ValueError Traceback (most recent call last) 14 frames /usr/local/lib/python3.7/dist-packages/tensorflow/python/framework/ops.py in _create_c_op(graph,op_def) 1881 except errors.InvalidArgumentError as e: 1882 # Convert to ValueError for backwards compatibility. -> 1883 raise ValueError(str(e)) 1884 1885 return c_op ValueError: Negative dimension size caused by subtracting 2 from 1 for '{{node max_pooling3d_5/MaxPool3D}} = MaxPool3D[T=DT_FLOAT,1]](Placeholder)' with input shapes: [?,64]. 子表单组成，应该跨越多个组件。它在父组件上初始化和提交，每个子组件都得到一个他们负责的 FormGroup。控件由 Angular Material 制成。

问题是，当我提交表单时，验证不起作用。如果提交按钮移动到子组件内，它们就可以正常工作，因此它与我正在验证的表单组位于同一组件中，但这不是我想要实现的目标。

代码示例如下，带有虚拟名称。

父模板：

FormGroup

家长 TS：

<form [formGroup]="mainForm" (ngSubmit)="submitForm()">
    <button mat-button mat-raised-button color="primary" type="submit">Save</button>
    <first-child [firstChildGroup]="mainForm.get('firstChildGroup')"></first-child>
    <second-child [secondChildGroup]="mainForm.get('secondChildGroup')"></second-child>
</form>

子模板：

export class ParentComponent implements OnInit {
    mainForm: FormGroup;
    constructor(private fb: FormBuilder) {}

    ngOnInit(): void {
        this.mainForm = this.fb.group({
            firstChildGroup: this.fb.group({
                one: ['',[Validators.required]] // and other controls with other validators
            }),secondChildGroup: this.fb.group({...})
        });    
    }
}

子 TS：

<div [formGroup]="firstChildGroup">
    <mat-form-field appearance="fill">
        <mat-label>First child group <strong class="text-danger">*</strong></mat-label>
        <input matInput formControlName="one">
        <mat-error>
            required
        </mat-error>
    </mat-form-field>
</div>

所以，回顾一下：export class FirstChildComponent { @input() firstChildGroup: FormGroup; } 将初始化的 ParentComponent 元素传递给多个子组件，但是当提交按钮位于父组件上时，验证将不起作用。它必须是。

有什么解决办法吗？也欢迎所有建议。

解决方法

因为当我们从父组件调用 onSubmit 时，我们在子组件中使用了独立的 FormGroup 指令，所以它不会传播到子组件。

我们可以通过使用 FormGroupDirective 创建子表单而不是将 formControl 传递给子组件来解决这个问题。

<form #fgd="ngForm" [formGroup]="mainForm" (ngSubmit)="submitForm()">
    <button (click)="fgd.onSubmit(null)" mat-button mat-raised-button color="primary" type="submit">Save</button>
    <first-child></first-child>
    <second-child></second-child>
</form>

child.component.ts

@Component({
  selector: 'app-first-child',templateUrl: './first-child.component.html',styleUrls: ['./first-child.component.css'],viewProviders: [{ provide: ControlContainer,useExisting: FormGroupDirective }]
})
export class FirstChildComponent implements OnInit {
   firstChildGroup: FormGroup;

  constructor(private parentForm: FormGroupDirective) { }

  ngOnInit() {
    this.firstChildGroup = this.parentForm.form;
  }

}

child.component.html

<div  formGroupName="firstChildGroup">
    <mat-form-field appearance="fill">
        <mat-label>First child group <strong class="text-danger">*</strong></mat-label>
        <input matInput formControlName="one">
        <mat-error>
            Required
        </mat-error>
    </mat-form-field>  
</div> 

Working Example