在formGroup中创建新的子formGroup - Angular 6

Question

我有一个 Angular 6 应用程序。我有一个类似stackblitz的表格。

PERFECTLY WORKING SAMPLE

但是，我想创建一个共享的country-state 组件。我想在我需要的时候打电话。所以，我将我的项目转换为下面的 stackblitz。 但是，我不想为country-state 创建新的表单组。我想从父母那里使用。但是，我无法执行我的第二次 stackblitz。

NOT WORKING SAMPLE

我怎样才能做到这一点？

Answer 1

这是 Angular 中 @Input() 装饰器的主要用途：

在您的 country-state.component.ts 中添加 Input 到您的导入并使用如下所述的装饰器：

import { Component, OnInit, Input } from '@angular/core';
...

@Component({
  selector: 'app-country-state',
  templateUrl: './country-state.component.html',
  styleUrls: ['./country-state.component.css']
})
export class CountryStateComponent implements OnInit {

  countries: Country[];
  states: State[];

  @Input() 
  studentForm; // <-- This
...
}

然后在您的 app.component.ts 中将您的子标签更改为：

<app-country-state [studentForm]="studentForm"></app-country-state>

之后，在您的country-state.component.html 添加form 标签，如：

<form [formGroup]="studentForm">
    <label>Country:</label> 
    <select formControlName="countryId" (change)="onSelect($event.target.value)">
      <option [value]="0">--Select--</option>
      <option *ngFor="let country of countries" [value]="country.id">{{country.name}}</option>
    </select>
    <br/><br/>

    <label>State:</label>
    <select formControlName="stateId">
      <option [value]="0">--Select--</option>
      <option *ngFor="let state of states " value= {{state.id}}>{{state.name}}</option>
    </select>
 </form>

因此，您不会创建新的 formgroup 实例，但您将使用父级的实例。

Answer 2

使用 controlContainer 尝试复合表单

parent.component.ts

this.studentForm = new FormGroup({
      'studentName': new FormControl(''),
      'stateId': new FormControl(''),
      'countryId': new FormControl('')
    })

parent.component.html

<form [formGroup]="studentForm" (ngSubmit)="onSubmit()">
    <label>Student Name:</label> 
    <input formControlName="studentName">
    <br/><br/>
    <app-country-state></app-country-state>
    <br/><br/>
    <button type="submit">SAVE</button>
</form>

子组件内部提供ViewContainer获取父组控制

import { Component, OnInit } from '@angular/core';
import { Country } from '../country';
import { State } from '../state';
import { SelectService } from '../select.service';
import { FormControl, FormGroupDirective, FormGroup, ControlContainer } from '@angular/forms';

@Component({
  selector: 'app-country-state',
  templateUrl: './country-state.component.html',
  styleUrls: ['./country-state.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class CountryStateComponent implements OnInit {
  countryId;

  countryState: FormGroup;
  countries: Country[];
  states: State[];

  constructor(private selectService: SelectService, private parentcontrol: FormGroupDirective) { }

  ngOnInit() {

    this.countryState = this.parentcontrol.control;

    this.parentcontrol.control.updateValueAndValidity();
    //  this.parentcontrol.control.addControl('stateId', new FormControl(''));
    this.countries = this.selectService.getCountries();
  }


  onSelect(countryid) {
    // this.states = this.selectService.getStates().filter((item) => item.countryid == this.studentForm.controls.countryId.value);
  }

}

示例：https://stackblitz.com/edit/angular-guqxbh

Answer 3

您需要将您的 formGroup 作为输入传递给子组件

国家/地区.component.ts

@Input() studentForm;

在 app.component.html 中

<app-country-state [studentForm]="studentForm"></app-country-state>

在 country-state.component.html

<form [formGroup]="studentForm" >
   ....
  </form>

我修改了你的代码 https://stackblitz.com/edit/angular-q3pqgk