angular2 - angular中如何将子组件的FormControl绑定到父组件的FormGroup中？

问题描述

问 题

angular初学者一枚，现在有一个表单方面的需求
我使用PrimeNg的DropDown自己写了一个包含内容下拉组件

<p-dropdown [options]="cities" [formControlName]="tzformControlName"></p-dropdown>

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

@Component({
  selector: 'tz-dropdown-car',
  templateUrl: './dropdown-car.component.html',
  styleUrls: ['./dropdown-car.component.css']
})
export class DropdownCarComponent implements OnInit {
  cities: SelectItem[];
  @Input()
  tzformControlName: string;

  constructor() {
    this.cities = [];
    this.cities.push({label: 'Select City', value: null});
    this.cities.push({label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}});
    this.cities.push({label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}});
    this.cities.push({label: 'London', value: {id: 3, name: 'London', code: 'LDN'}});
    this.cities.push({label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}});
    this.cities.push({label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}});
  }

  ngOnInit() {
  }

}

然后我想直接放到父组件的响应式表单中

我试了将FormControlName传参到子组件，但是提示找不到父FormGroup

请问该如何配置？

解决方案

将父组件的formGroup传递到子组件的属性中。

这篇关于angular2 - angular中如何将子组件的FormControl绑定到父组件的FormGroup中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！