Question

我已将问题上传到stackblitz。

我有一个站点，该站点具有多种形式，可以通过路由进行访问。我正在将提交逻辑集中在父组件中。只需单击即可提交所有表单。

是否有一种方法可以访问子路径上的form元素（以检查其有效性），而无需使用专用服务？

谢谢

Answer 1

想象您有一个simpleService

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  data:any={}
  constructor() { }
}

一个竞争者可能像，看到[(ngModel)]中我们使用的是data.nameOfPropertie

<form ngNativeValidate #f1="ngForm">
  <div>
    <label for="username">User Name: </label>
    <input [(ngModel)]="data.username" class="form-control" type="text" name="usrname" required>
  </div>
  <div>
    <label for="phonenum">Phone: </label>
    <input [(ngModel)]="data.phonenum" class="form-control" name="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>
  </div>
  </form>

您的component.ts之类的

export class Form1Component  {
  get data()
  { 
    return this.dataService.data;
  }
  set data(value)
  {
     this.dataService.data=value
  }
  constructor(private dataService:DataService){}
}

每个注入DataService的组件都可以访问this.dataService.data

查看您的forked stackblitz

注1：如果选择ReactiveForms，则tecnica相似，您共享数据，并通过订阅myForm.valueChanges对其进行更改

注释2：对于大多数复杂的表格，我们可以使用Subject并发出Value，请参见我在SO question中的回复

如何通过路由器访问孙子元素？

1 个答案: