Angular 8：将表单数据作为服务发送到另一个组件

Question

如何将所有 Formgroup 数据作为 Angular 中的服务发送到另一个组件？我正在寻找 ControlValueAccessor 的替代品。所以任何时候有人在表单上写东西，接收者都会得到值数据。

尝试编辑下面的代码以使其正常工作。

地址发件人表单：

export class AddressFormComponent implements OnInit {

  editAddressForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {

    this.editAddressForm = this.formBuilder.group({
      'streetName' : [null, Validators.required, Validators.maxLength(64)],
      'city' : [null, Validators.required, Validators.maxLength(32)],
      'state' : [null, Validators.required, Validators.maxLength(16)],
      'postalCode' : [null, Validators.required, Validators.maxLength(16)]
    });
  }

  ngOnInit() {
  }

   // What should I write as Event Code??
}

服务：

export class AddressService {

  private messageSource = new Subject();
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(currentMessage) {
    this.messageSource.next(currentMessage);
  }
}

接收者：

export class AddressCombinedReceiverComponent implements OnInit {

  message: any;

  constructor(private readonly addressService: AddressService) {
    this.addressService.currentMessage.subscribe(currentMessage => this.message = currentMessage);
    }

  ngOnInit() {
  }

}

相关问题：Angular 2 - formControlName inside component

Answer 1

这看起来与您的需要相去甚远，请在您的 AddressFormComponent 中尝试以下操作。确保在需要时清理订阅，在下面添加。

public subs = new Subscription();
public editAddressForm: FormGroup;

constructor(addressService: AddressService){}

public ngOnInit(): void {

  this.editAddressForm = this.formBuilder.group({
    'streetName' : [null, Validators.required, Validators.maxLength(64)],
    'city' : [null, Validators.required, Validators.maxLength(32)],
    'state' : [null, Validators.required, Validators.maxLength(16)],
    'postalCode' : [null, Validators.required, Validators.maxLength(16)]
  });

  this.subs.add(this.editAddressForm.valueChanges.subscribe(data => 
  {
    this.addressService.changeMessage(this.editAddressForm);
  }));
}

public ngOnDestroy(): void
{
  this.subs.unsubscribe();
}

这应该反过来将数据推送到您拥有的主题，进而导致该主题的订阅者接收数据。要确认尝试以下操作

export class AddressCombinedReceiverComponent implements OnInit {

  public message: any;

  constructor(private readonly addressService: AddressService) {}

  public ngOnInit() {
    this.addressService.currentMessage.subscribe(currentMessage => { 
      this.message = currentMessage;
      console.log(this.message); // should be the form coming through
    });
  }

}

Answer 2

您无需响应事件。 FormGroups 已经有一个可观察到的变化。

例子

// address-form.component.ts
export class AppComponent implements OnDestroy {
  editAddressForm: FormGroup;

  ngOnDestroy() {
    // cleanup
    this.addressService.formValues$ = null;
  }

  constructor(private addressService: AddressService) {
    this.editAddressForm = new FormGroup({
      streetName: new FormControl(null, { validators: [Validators.required, Validators.maxLength(64)]}),
      city: new FormControl(null, { validators: [Validators.required, Validators.maxLength(32)]}),
      state: new FormControl(null, { validators: [Validators.required, Validators.maxLength(16)]}),
      postalCode: new FormControl(null, { validators: [Validators.required, Validators.maxLength(16)]}),
    });

    this.addressService.formValues$ = this.editAddressForm.valueChanges;
  }
}

// address.service.ts
export class AddressService {
  formValues$: Observable<any>;

  constructor() { }
}

关于接收者，如果打算在模板中显示表单更改，那么我建议使用异步管道，以便您仅在定义时订阅，例如：

// address-combined-receiver.component.ts
export class SimpleComponent implements OnInit {
  addressValues$: Observable<any>;

  constructor(private addressService: AddressService) {
    this.addressValues$ = this.addressService.formValues$;
  }

  ngOnInit() {
  }
}

<!-- address-combined-receiver.component.html -->
<ng-container *ngIf="addressValues$ | async as addressValues">
  <pre>{{ addressValues | json }}</pre>
</ng-container>