Question

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

父组件模板：

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

ParentComponent ts文件：

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

子组件模板：

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

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

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

app-routing.module.ts文件：

{{1}}

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

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

1 个答案: