Question

从父组件获取子组件控制组的值的最佳方法是什么？我使用值访问器实现了这个，但我想知道什么是最好的方法。以下是我创建的plunker演示http://plnkr.co/edit/6sIKwAyF7KwsJbmk5KIJ?p=preview 我有两个问题： 1.如果我在子组件中有10个输入，我应该为所有组件写onchange（）事件吗？有什么办法可以避免吗？ 2.在我的孩子表格中，这两个字段都是必填字段。父表格应该设置无效，直到子表单的所有控件都有效，这在我的情况下没有发生。我怎么能这样做？我得到了值但有人请看看它们，告诉哪一个是正确的实施方式，我怎样才能避免上述问题

<address [ngFormControl]="myForm.controls['Address']"></address>

我的父组件中的地址选择器标记和

  constructor(@Optional() ngControl: NgControl, elementRef: ElementRef,fb: FormBuilder) {  
ngControl.valueAccessor = this;
this.onChange = (_) => {};
this.onTouched = (_) => {};
this.ngControl = ngControl;
    this.addressForm = fb.group({  
  'Address1':  ['',Validators.required],
  'City':['',Validators.required]
}); 
}

这就是我如何为子组件和构建控件组分配值

Answer 1

你只需要使用双向绑定。

绑定每个输入时，将其与[（ngModel）]绑定。

此外，在您的子组件中，使用@Input作为地址输入，当您绑定它时，也使用双向绑定。在我的例子中，我不使用ngFormControl，但我直接使用@Input作为我的输入，然后进行双向绑定。我希望这对你的案子有用。这是我的代码：

app.ts

import {Component} from 'angular2/core'
import { Address } from 'src/address'
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <form (ngSubmit)="onSubmit()"  
        class="ui form">

    <div>  
      <label>Name:</label>  
      <input type="text" >  
    </div>
     <div>  
      <label>Phone:</label>  
      <input type="text"  >   
    </div>
    <address [(address)]="value.address"></address>
    <button type="submit">Submit</button>  
  </form>  
  `,
  directives: [Address]
})
export class App {
  address: any;
  value: any; 

  constructor() {

    this.value = {
      address: {};
    }
  }

  onSubmit() {
    console.log('you submitted value: ', this.value);  
  }
}

address.ts

import { Component, Input, Optional, ElementRef,EventEmitter,Renderer } from 'angular2/core';  
import {  FORM_DIRECTIVES,FormBuilder,ControlGroup,Validators,DefaultValueAccessor,NgControl,ControlValueAccessor} from 'angular2/common';


@Component({  
  selector: 'address',  
  directives: [FORM_DIRECTIVES],  
  template: `     <h2>Address:</h2>
     <div>  
      <label>Address:</label>  
      <input type="text"  [(ngModel)] = 'address.address'>
    </div>
     <div>   
      <label>City:</label>  
      <input type="text" [(ngModel)] = 'address.city' >
    </div>`,
  providers: [DefaultValueAccessor],
  inputs: ['address']
})
export class Address implements ControlValueAccessor{
  @Input address;
  constructor() {  

  }
}

这是一个pnkr示例：

http://plnkr.co/edit/xeOKY8blBsFjzmb12El9

如何将子组件的表单值发送到使用值访问器实现的父组件？

1 个答案: