Angular — архитектура компонентов приложения

Я думаю, что лучший способ решить такие проблемы (обмен данными). мы всегда должны создавать общий сервис. поместите один FormGroup там. и напишите методы в каждом компоненте для обновления значения этой группы форм. и, в конечном итоге, метод получения значения группы форм. На сегодняшний день это лучший способ написать общий код FormGroup в службах.

this.lotTwoFormGroup = this.formBuilder.group({
  title: ['', Validators.compose([Validators.required])],
  description: ['', Validators.compose([Validators.required])],
  dutchTitle: [''],
  dutchDescription: [''],
  frenchTitle: [''],
  frenchDescription: ['']
});

Вот рабочий раствор.

Я использовал FormArray. Для получения дополнительной информации прочитайте здесь

Во-первых, давайте создадим компонент ввода и назовем его MyInputComponent

@Component({
  selector: 'my-input',
  template: `
    <div>
      Attr1: <input type = "text" [ngModel] = "value.attr1" 
               (ngModelChange) = "updateModel($event, 'attr1')" />
    </div>
    <div>
      Attr2: <input type = "text" [ngModel] = "value.attr2" 
               (ngModelChange) = "updateModel($event, 'attr2')" />
    </div>
  `
})
export class MyInputComponent {
  value;

  updateModel(value, attrName) {
    this.value[attrName] = value;
  }
}

Это довольно простой компонент. Он содержит два входа (вы можете добавить больше) и привязывает модель к этому входу с помощью ngModel. На данный момент он ничего не раскрывает внешнему миру. При изменении любого из входов он соответственно обновляется value.

Теперь давайте использовать его в нашем main.component

Допустим, у вас есть следующие данные

  attributes = [
    { 'attr1': 'value1', 'attr2': 'value12'},
    { 'attr1': 'value2', 'attr2': 'value22'},
    { 'attr1': 'value3', 'attr2': 'value32'},
  ];

И вы можете использовать этот компонент в своем шаблоне следующим образом.

<div *ngFor = "let attr of attributes; let i = index">
  <my-input></my-input>
  <hr />
</div>

Теперь давайте привяжем formArrayName и formControlName к этому входу.

Для этого мы импортируем ReactiveFormsModule в наш модуль и заставляем MyInput внедрять ControlValueAccessor

my-input.component

@Component({
  selector: 'my-input',
  template: `
    <div>
      Attr1: <input type = "text" [ngModel] = "value.attr1" (ngModelChange) = "updateModel($event, 'attr1')" />
    </div>
    <div>
      Attr2: <input type = "text" [ngModel] = "value.attr2" (ngModelChange) = "updateModel($event, 'attr2')" />
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyInputComponent),
      multi: true
    }
  ]
})
export class MyInputComponent implements ControlValueAccessor {

  value;

  onChange;
  onTouched;
  disabled = false;

  updateModel(value, attrName) {
    this.value[attrName] = value;
    this.onChange(this.value); // now I call onChange method to update the value within form
  }

  // comes from ControlValueAccessor
  writeValue(newValue): void {
    this.value = newValue;
  }

  // comes from ControlValueAccessor
  registerOnChange(fn: (rating: number) => void): void {
    this.onChange = fn;
  }

  // comes from ControlValueAccessor
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // comes from ControlValueAccessor
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

}

И измените шаблон основного компонента на

<div [formGroup] = "myForm">
  <div formArrayName = "array">
    <div *ngFor = "let attr of attributes; let i = index">
      <my-input [formControlName] = "i"></my-input>
      <hr />
    </div>
    <button (click) = "save()">Save</button>
  </div>
</div>

И вам нужно создать formGroup внутри основного компонента следующим образом:

export class AppComponent  {

  myForm = this.fb.group({
    array:  this.fb.array([])
  })

  attributes = [
    { 'attr1': 'value1', 'attr2': 'value12'},
    { 'attr1': 'value2', 'attr2': 'value22'},
    { 'attr1': 'value3', 'attr2': 'value32'},
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    const arrayFormControl = this.myForm.get('array') as FormArray;
    this.attributes.forEach(attr => 
      arrayFormControl.push(this.fb.control(attr)));
  }

  save() {
    console.info(this.myForm.value);
  }
}