如何在表单中包含自定义组件？

Posted 2023-03-13

【中文标题】如何在表单中包含自定义组件？

【英文标题】：How to include a custom component in form?

【发布时间】：2018-09-03 19:31:25

【问题描述】：

我有一个名为“Employee-type”的组件（其中包括一个选择组件），它将用于显示相应的员工列表（数据网格）。 如何在表单中重复使用相同的组件，如下所示，并具有有效、无效、脏、已触摸等额外功能？

【问题讨论】：

你的组件的代码是什么样的？

【参考方案1】：

我使用@angular/material mat-select 创建了一个简单的可重复使用的选择组件。查看live demo。

my-select.component.ts

import  Component, Input  from '@angular/core';
import  FormControl  from '@angular/forms';

@Component(
  selector: 'my-select',
  template: `
  <mat-form-field>
    <mat-select [formControl]="ctrl" [placeholder]="placeholder">
      <mat-option *ngFor="let option of options" [value]="option">
         option 
      </mat-option>
    </mat-select>
  </mat-form-field>
  `,
  styles: [`:host  display: block; `]
)
export class MySelectComponent  
  @Input() ctrl: FormControl;
  @Input() options: string[];
  @Input() placeholder: string;

示例用法：

app.component.html

<form [formGroup]="form">
    <my-select [ctrl]="form.get('cities')" [options]="cities" placeholder="Cities"></my-select>
    <my-select [ctrl]="form.get('countries')" [options]="countries" placeholder="Countries"></my-select>
</form>

app.component.ts

import  Component  from '@angular/core';
import  FormBuilder, FormGroup, Validators  from '@angular/forms';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  form: FormGroup;

  cities = ['Krakow', 'Warszawa', 'Gdansk'];
  countries = ['Poland', 'Germany', 'Sweden'];

  constructor(private fb: FormBuilder) 
    this.form = this.fb.group(
      cities: ['', Validators.required],
      countries: ['', Validators.required],
    )
  

【讨论】：

是否可以在<my-select> 上设置一个formControlName，以便我可以从my-select 获取选定的值（在本例中为选定的城市）到父组件？ （我有一个单选按钮组组件，我需要选择单选的值）。

我刚刚在medium.com/@paynoattn/…看到一篇关于如何使用formControlName的文章