如何为FormControls创建自己的组件? [英] How can I create my own component for FormControls?

问题描述

我想创建一个表单，并为其控件使用一个新的自定义组件.因此，我创建了一个新组件并将其包含在父表单中.但是，尽管父窗体具有formGroup，但是Angular抱怨它没有.

I would like to create a form and use a new, custom component for its controls. So I created a new component and included it into the parent form. But although the parent form has a formGroup, Angular complains that it does not.

错误:

错误:formControlName必须与父formGroup指令一起使用. 您将要添加一个formGroup 指令并将其传递给现有的FormGroup实例(您可以在您的类中创建一个实例).

Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

父表单具有:

<form [formGroup]="learningObjectForm" (ngSubmit)="onSubmit()" novalidate>
  <div>
    <button type="submit"
            [disabled]="learningObjectForm.pristine">Save</button>
  </div>

  <ava-form-control [label]="'Resource'"></ava-form-control>

</form>

在.ts中:

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.learningObjectForm = this.fb.group({
      text: '',
    });
  }

在我拥有的自定义组件中

In the custom component I have

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

@Component({
  selector: 'ava-form-control',
  template: `  <div>
    <label>{{label}} :</label>
    <input formControlName="{{name}}">
  </div>
`
})
export class FormControlComponent implements OnInit {

  @Input() label: string;
  @Input() name: string;

  constructor() {}

  ngOnInit() {
    if (this.name === undefined) {
      // turns 'The Label' into 'theLabel'
      this.name = this.label[0].toLowerCase().concat(this.label.slice(1));
      this.name = this.name.split(' ').join('');
      console.log(this.label, this.name);
    }
  }
}

推荐答案

您还应该将formGroup实例与control name一起传递给您的custom component.然后在自定义组件中的formGroup下创建一个form control.您的自定义组件实际上将在您提供的相同formGroup下创建控件.

You should also be passing the formGroup instance along with control name to your custom component. And then create a form control under that formGroup in custom component. Your custom component will create the control virtually under the same formGroup that you have provided.

<form [formGroup]="learningObjectForm" (ngSubmit)="onSubmit()" novalidate>
  <div>
    <button type="submit"
            [disabled]="learningObjectForm.pristine">Save</button>
  </div>

  <ava-form-control [label]="'Resource'" [formGroup]="learningObjectForm" [controlName]="'mycontrol'"></ava-form-control>

</form>

custom.component.ts

custom.component.ts

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

@Component({
  selector: 'ava-form-control',
  template: `  <div>
    <label>{{label}} :</label>
    <input [formControl]="formGroup.controls[controlName]>
  </div>
`
})

export class FormControlComponent implements OnInit {

  @Input() label: string;
  @Input() formGroup: FormGroup;
  @Input() controlName: string;

  constructor() {}

  ngOnInit() {
    let control: FormControl = new FormControl('', Validators.required);
    this.formGroup.addControl(this.controlName, control);
  }
}

使用此控件，您的父组件可以访问在各自的自定义组件中定义的所有表单控件.

With this your parent component can access all the form controls defined within their respective custom components.

这篇关于如何为FormControls创建自己的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！