Question

我有两种形式，目前在同一组件上运行良好。如 InfoAndQualificationComponent.ts

中所示

results = np.reshape(results.shape[0],(length,6))

但是由于代码混乱并且需要模块化（使代码更小以便于更新和调试）。我想将这些表格分为两个不同的子组件，例如 UserInfoComponent.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
@Component({
  selector: 'app-info-and-qualification',
  template: `<form class="form-horizontal" [formGroup]="form" (ngSubmit)="form.value">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="firstname" formControlName="firstname">
  </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="lastname" formControlName="lastname">
  </div>

  <div class="form-group"style="margin-top:50px">
    <input type="text" class="form-control" placeholder="Qualification" formControlName="qualification">
  </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Qualification type" formControlName="type">
  </div>
  <div class="form-group"><button class="btn-primary">Submit</button></div>
</
})
export class InfoAndQualificationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  form = new FormGroup({
    firstname: new FormControl(),
    lastname: new FormControl(),
    qualification: new FormControl(),
    qtype: new FormControl(),
  });

  onSubmit(e)
  {
    console.log(e);
  }
}

和 UserQualificationComponent.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: 'app-userinfo',
  template: `<form class="form-horizontal" [formGroup]="form1" (ngSubmit)="form1.value">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="firstname" formControlName="firstname">
  </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="lastname" formControlName="lastname">
  </div>

  <div class="form-group"><button class="btn-primary">Submit</button></div>
</form>`,

})
export class UserInfoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  form1 = new FormGroup({
    firstname: new FormControl(),
    lastname: new FormControl(),
  });

  onSubmit(e)
  {
    console.log(e);
  }
}

要导入到一个组件中的可能是 infoqualification.ts 这样的

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: 'app-qualification',
  template: `<form action="" class="form-horizontal" [formGroup]="form2"  (ngSubmit)="form2.value">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Qualification" formControlName="qualification">
  </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Qualification type" formControlName="qtype">
  </div>
  <div class="form-group"><button class="btn-primary">Submit</button></div>
</form>`,
})
export class UserQualificationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  form2 = new FormGroup({
    qualification: new FormControl(),
    qtype: new FormControl(),
  });

  onSubmit(e)
  {
    console.log(e);
  }
}

在单独的组件中分别执行，它们应该将值返回给主组件。请注意，我在角度上很新。

Answer 1

您正在为每个组件创建单独的FormGroup。建议在父组件中创建单个表单组，然后将@Input（）传递给子组件。在子组件中使用表单组，我们可以添加表单控件。

您还可以在每个子组件中创建验证方法，这些方法将从父组件中调用。

用于提交按钮和验证的代码应添加到父组件中。

Answer 2

使用ControlContainer

文档：https://angular.io/api/forms/ControlContainer

import { Component } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'address',
  template: `
    <fieldset ngModelGroup="address">
      <div>
        <label>Zip:</label>
        <input type="text" name="zip" ngModel>
      </div>
      <div>
        <label>Street:</label>
        <input type="text" name="street" ngModel>
      </div>
      <div>
        <label>City:</label>
        <input type="text" name="city" ngModel>
      </div>
    </fieldset>
  `,
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class AddressComponent  {}

有关更多详细信息，请检查以下内容：https://medium.com/@a.yurich.zuev/angular-nested-template-driven-form-4a3de2042475

我如何将两种形式转换为组件并添加组件以在角度5中查看

2 个答案: