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

我有一个父组件“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>

子组件模板：

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

---

您可以使用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>

---

示例：

你能分享你的代码吗嘿，这够了吗？根据你的问题，代码片段不匹配，你的父组件中的子组件在哪里？嘿，现在好了吗？对不起，我没有上传app.routing module earlierchild表单字段仅在您转到该页面时显示，对吗？有趣。我不知道你能做到。非常感谢。。。但这是唯一可能的方法吗？？？因为我不能这样做…因为我有其他不应该在表单中的div…这会弄乱我的ui…你不能把div放在表单之外吗？嘿…我是个白痴…我可以把所有div放在表单中…谢谢lot@Chellappan嘿…我如何在html端进行验证？？

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

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

<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>

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() {
  }

}