带有Angular 5的控件值访问器的子组件中的多个表单控件 [英] Multiple form controls in child component with control value accessor using Angular 5

问题描述

我想在Angular 5中实现带有控件值访问器的功能.这就像从父级访问子级自定义组件中的多个表单控件一样.请让我知道我是否可以通过其他方式实现这一目标. 强制使用模板驱动的表单.

I want to implement a functionality with control value accessor in Angular 5. It's like to access multiple form control in child custom component from a parent. Please let me know if I can achieve this in another way. Template driven form compulsory.

如果还有其他任何通用的创建带有双向数据绑定的自定义控件，请告诉我.如果答案是Plunker或StackBlitz，那就太好了.

If there is any other any to generic create a custom control with two-way data binding, please let me know. It would great if answers are in Plunker or StackBlitz.

这是我的: https://stackblitz.com/edit/angular-qzioet

父组件:-

export class AppComponent implements OnInit  {
  public countryList: any = [];
  public option: any =[ ];
      public personal = {
   identity: {
  name: {firstname: null, lastname: null },
  age: null,
  sex: null
   }
 }
  @ViewChild('personalForm') form: any;
 constructor() {

   }

父html:-

<app-input name ='name' [(ngModel)]="personal.identity.name" [form]="personalForm" ngDefaultControl></app-input>

<app-input name ='name' [(ngModel)]="personal.identity.name" [form]="personalForm" ngDefaultControl></app-input>

子组件:-

   import {Component, Input, forwardRef} from '@angular/core'
   import { 
    FormControl,
         FormGroup,
    ControlValueAccessor,
    NG_VALUE_ACCESSOR,
        NG_VALIDATORS,
     Validator
         } from '@angular/forms';


    @Component({
 selector: 'app-input',
   templateUrl: "./input-child.html",
          providers: [
{ 
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => Child),
  multi: true
},
{
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => Child),
  multi: true,
} 
   ]
   })

   export class Child implements ControlValueAccessor, Validator {
 @Input() form: any;
  @Input() name: any;
 childControl = new FormGroup({ firstname: new FormControl() , 
 lastname: new FormControl() });

 fn: (value: any) => void;
 constructor() {
     console.log(this.childControl);
  }

   writeValue(value: any) {
 if (value) {
  this.childControl.setValue(value);
 }
 }  

  registerOnChange(fn: (value: any) => void) {
   this.fn = fn;
  }

   registerOnTouched() {}

    validate(c: FormControl) {

        return this.childControl.errors;
        };
    }

子html:-

    `<h1>Child</h1>
    <div>
 <input [formControl]="firstname" (input)="fn($event.target.value)" 
    required>

<input [formControl]="lastname" name="lastname" 
 (input)="fn($event.target.value)" required>

</div>`

推荐答案

无需实现ControlValueAccessor，可以更轻松地实现您想要的操作. 相反，您只需在子组件中设置viewProviders即可将现有的父NgForm用作ControlContainer.

What you want to do can be achieved more easily without implementing ControlValueAccessor. Instead, you can simply set the viewProviders in the child component to use the existing parent NgForm as the ControlContainer.

然后，无需将表单作为输入参数传递给子组件，因为表单控件将自动成为父表单的一部分.

Then, there's no need to pass the form as an input parameter to the child component as the form controls will automatically be part of the parent's form.

input-child.component.ts:

input-child.component.ts:

@Component({
    selector: 'input-child',
    templateUrl: './input-child.component.html',
    viewProviders: [{ provide: ControlContainer, useExisting: NgForm}]
})
export class Child {
    @Input() personalName = {};

    ...
}

input-child.component.html:

input-child.component.html:

<h1>Child</h1>
<div>
    <input [(ngModel)]="personalName.firstname" name="firstname" required>
    <input [(ngModel)]="personalName.lastname" name="lastname" required>
</div>

parent.component.ts:

parent.component.ts:

export class AppComponent {
    public countryList: any = [];
    public option: any =[ ];
    public personal = {
        identity: {
            name: {firstname: 'first-name', lastname: 'last-name' },
            age: null,
            sex: null
        }
    }

    ...
}

parent.component.html:

parent.component.html:

<form #personalForm="ngForm" name="personalForm">
    <child-input [personalName]="personal.identity.name"></child-input>
</form>

这篇关于带有Angular 5的控件值访问器的子组件中的多个表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！