Угловые реактивные формы, связывающие два поля в отдельных формах

Question

Мне бы хотелось, чтобы два связывались со значениями в двух отдельных реактивных формах.Так что у меня есть один компонент, так как главная ведьма включает в себя два отдельных компонента, таких как один компонент и второй компонент.В каждом из них есть форма.Итак, в первом компоненте имя поля - также во втором компоненте.Когда я изменяю значение из одного поля, оно должно быть привязано к другому.Может быть, кто-то может подсказать мне, как это сделать.

Answer 1

Мое решение:

Создание службы

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ComponentInteractionService {
  public name = new Subject<string>();
}

Компонент A:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ComponentInteractionService } from '../../services/component-interaction.service';

@Component({
  selector: 'app-form-eins',
  templateUrl: './form-eins.component.html',
  styleUrls: ['./form-eins.component.css']
})
export class FormEinsComponent implements OnInit {

  formEins: FormGroup;

  constructor(private fb: FormBuilder,
    private ci: ComponentInteractionService) { }

  submit() {
    this.ci.name.next(this.formEins.get("nameEins").value);
  }

  ngOnInit() {

    this.formEins = this.fb.group({
      nameEins: ''
    });

    this.ci.name.subscribe( 
      data => { this.formEins.get("nameEins").setValue(data); }
    );   

  }

}

Компонент B:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ComponentInteractionService } from '../../services/component-interaction.service';

@Component({
  selector: 'app-form-zwei',
  templateUrl: './form-zwei.component.html',
  styleUrls: ['./form-zwei.component.css']
})
export class FormZweiComponent implements OnInit {

  formZwei: FormGroup;

  constructor(private fb: FormBuilder,
    private ci: ComponentInteractionService) { }

  submit() {
    this.ci.name.next(this.formZwei.get("nameEins").value);
  }

  ngOnInit() {

    this.formZwei = this.fb.group({
      nameEins: ''
    });

    this.ci.name.subscribe( 
      data => { this.formZwei.get("nameEins").setValue(data); }
    ); 

  }

}

Answer 2

В зависимости от вашего состояния, у вас есть два отдельных компонента на html-странице, и вы хотите обеспечить взаимодействие между ними.

Для достижения этой цели вы должны Использовать общий сервис, между компонентами , который позволяет взаимодействие.

вы должны следовать этому: Общаться между компонентами через службу , в статье также перечислены другие способы общения, посмотрите.