ControlValueAccessor c несколькими formControl в дочернем компоненте

У меня есть несколько 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

6
angular

2 ответов

Я не знаю, почему вопрос был проголосован, но я чувствую, что это может быть полезно для других, поэтому я публикую ответ. После нескольких попыток привязки детской formgroup мне удалось успешно привязать значение

  @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

6

сначала это мне очень помогло, но потом я понял, что мы все усложняем. Нам не нужно создавать собственный formControl, мы можем просто передать formGroup нашему дочернему компоненту. В Родительском компоненте вместо 

this.form = fb.group({
  name:['Angular2 (Release Candidate!)'],
  username: [{firstName: 'First', lastName: 'Last'}],
  email:['My Email']

});

мы инициализируем username как FormGroup вместо элемента управления:

this.form = fb.group({
  name:['Angular2 (Release Candidate!)'],
  username: fb.group({
   firstName: ['First'],
   lastName: ['Last']
}),
  email:['My Email']

});

в дочернем компоненте нам нужно свойство ввода для FormGroup

@Input()
usernameGroup: FormGroup;

в дочернем шаблоне:

<div [formGroup]="usernameGroup">
   <input formControlName="firstName">
   <input formControlName="lastName">
</div>

и затем в Родительском шаблоне:

<my-child [usernameGroup]="form.controls.username"></my-child>

для информации mor, проверьте этот пост: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

создание собственного formControl ist действительно перебор здесь, для более inforamtion об этом, посмотрите здесь: http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

2