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

Posted 2023-02-22

【中文标题】Angular 8：将表单数据作为服务发送到另一个组件

【英文标题】：Angular 8: Send Form data as a Service to Another Component

【发布时间】：2020-03-02 09:33:30

【问题描述】：

如何将所有 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

【问题讨论】：

你尝试过响应式 valueChanges observable 来捕捉价值变化吗？ angular.io/api/forms/AbstractControl#valueChanges

【参考方案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
    );
  

【参考方案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>