angular – 在子组件中具有多个formControl的ControlValueAccess

发布时间：2020-12-17 10:17:40 所属栏目：安全来源：网络整理

导读：我在子组件中有多个formcontrols,如何在子组件中应用验证器,因此原始表单将变为无效.使用ControlValueAccessor实现它是理想的,但是想从简单的@input表单组开始. @Component({ selector: 'my-child',template: ` h1Child/h1 div [formGroup]="childForm" inpu

我在子组件中有多个formcontrols,如何在子组件中应用验证器,因此原始表单将变为无效.使用ControlValueAccessor实现它是理想的,但是想从简单的@input表单组开始.

@Component({
  selector: 'my-child',template: `

  <h1>Child</h1>
  <div [formGroup]="childForm">
    <input formControlName="firstName">
    <input formControlName="lastName">
  </div>
  `
})

export class Child {
  @Input()
  childForm: FormGroup;
}

http://plnkr.co/edit/K1xAak4tlUKtZmOV1CAQ

我不知道为什么这个问题被投票,但我觉得它可能对其他人有帮助所以我发布了答案.
在多次尝试绑定子表单组后,我能够成功绑定值

@Component({
  selector: 'my-child',template: `

  <h1>Child</h1>
  <div [formGroup]="name">
    <input formControlName="firstName">
    <input formControlName="lastName">
  </div>
  `,providers: [
    {provide: NG_VALUE_ACCESSOR,useExisting: Child,multi: true}
  ]
})

export class Child implements ControlValueAccessor {
  name: FormGroup;
  constructor(fb: FormBuilder) {
    this.name = fb.group({
      firstName:[''],lastName: ['']
    });
  }

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

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

  registerOnTouched() {}
}

http://plnkr.co/edit/ldhPf7LTFVtTFHe9zfAj?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!