Question

我有一个Angular 6应用程序。而且我有一个像下面这样的表格。

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

NOT WORKING SAMPLE

我该如何实现？

Answer 1

这是@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

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

country-state.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

Answer 3

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

将新的子formGroup创建到formGroup-Angular 6

3 个答案: