在使用父组件中的保存按钮提交数据之前，如何验证来自父组件和子组件的用户输入？

Question

我有一个父组件“Parent”和一个子组件“Child”，在通过路由器链接单击锚标记时在父组件中调用它。 父组件中有两个用户输入，子组件中有两个用户输入。父组件中包含一个保存按钮。如何验证用户是否在父组件和子组件中都输入了数据，以便验证和保存用户输入？

父组件模板：

<img src="save.png"(click)="validateandsave(model)">
<input type="text" name="code" [(ngModel)]="model.code">
<input type="text" name="name" [(ngModel)]="model.name">
<a routerLink="PC">
<div (click)="showsettings()"> </div>
<router-outlet><router-outlet>

ParentComponent ts 文件：

showsettings() 
{ 
    this.router.navigate(['PC'], { relativeTo: this.route }); 
}
validateandsave()
{
    /*how to implement since i have inputs in child component as well*/
}

子组件模板：

<input type="text" name="phonenumber" [(ngModel)]="phonenumber">
<input type="text" name="address" [(ngModel)]="address">

如何验证用户是否在所有四个输入中都输入了数据（来自父母和孩子）？以便我可以保存数据

app-routing.module.ts 文件：

const routes: Routes = [{
        path: 'enter',
        component: ParentComponent,
        children: [

          {
            path: 'PC',
            component: ChildComponent
          }
        ]
      }
    ];

Answer 1

您可以使用 controlcontainer 将您的子表单字段注册到父表单。首先你应该将你的路由器插座包裹在你的表单标签中。

<form #f="ngForm"> 
 Email:<input type="text" ngModel name="email">
<br>
 Name:<input type="text" ngModel name="name">
 <a routerLink='pc'>Next</a>
 <router-outlet></router-outlet>
</form>

然后使用 viewproviders 来提供控件容器并使用现有的表单。

import { Component, OnInit } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
  selector: 'app-pc',
  templateUrl: './pc.component.html',
  styleUrls: ['./pc.component.css'],
  viewProviders:[{provide: ControlContainer, useExisting: NgForm}]
})
export class PcComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

例如：https://stackblitz.com/edit/angular-9z52wq