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

Question

我有两个表单目前运行在同一组件上没问题。如InfoAndQualificationComponent.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);
  }
}

但是因为代码比较杂乱，需要模块化（让代码变小，方便更新调试）。我想将这些表格拆分为两个不同的子组件，例如 UserInfoComponent.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);
  }
}

和UserQualificationComponent.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);
  }
}

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

<app-userinfo></app-userinfo>
<div style="margin-top:50px">
  <app-qualification></app-qualification>
</div>

在各自的组件中单独实现，它们应该 return 对主要组件有价值。请注意我是 angular.

的新手

Answer 1

您正在为每个组件创建单独的 FormGroup。建议在父组件中创建单个表单组并作为 @Input() 传递给子组件。在子组件中使用 Form Group 我们可以添加表单控件。

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

应在父组件中添加提交按钮和验证代码。

Answer 2

使用控件容器

文档：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

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

how can i convert two forms to components and adding components to view in angular 5

typescript

angular-components

angular

angular-reactive-forms