Angular 8:PatchValue 不适用于 ChangeDetector 和 UpdateValue [英] Angular 8: PatchValue not working with ChangeDetector and UpdateValue

问题描述

我想弄清楚为什么 PatchValue 不适用于 FormBuilder.它在检索值时显示数据，但不在 FormBuilder 中设置.有谁知道为什么?我正在使用 UpdateValue 和 Changedetector.请参阅下面的调试器图片，设置硬编码值也不起作用

I am trying to figure out why PatchValue does not work with FormBuilder. It shows data when retrieving the value, but does not set in the FormBuilder. Anyone know why? I am using UpdateValue and Changedetector. See Debugger picture below, Setting hard coded values does not work either

更新:

找到答案，看看 Formbuilder，它有额外的冒号或空格，猜猜真正的问题是，很多人已经写了 100 个组件，当有轻微的字符问题或空格等时，如何防止这种情况再次发生等?

Found the answer, look at the Formbuilder, it has extra colon or space, guess the real question is, many have written 100 of components, how does one prevent this from happening again when there are slight character issues or spaces, etc?

地址组件:

this.editSharedForm = this.formBuilder.group({
  'phoneNumber': [null, [Validators.required, Validators.maxLength(50)]],
  'emailAddress': [null, [Validators.required, Validators.maxLength(50), Validators.email]],
  'effectiveStartDate': [null, [Validators.maxLength(200)]],
  'addressChangeReason': this.formBuilder.group({
    'addressChangeReasonId: : ': [null, [Validators.required]],
    'addressChangeReasonCode: : ': [null, [Validators.required, Validators.maxLength(50)]],
    'addressChangeReasonDescription: : ': [null, [Validators.required, Validators.maxLength(255)]]
  }),
  'addressPurpose': this.formBuilder.group({
    'lkPurposeofUseId: ': [null, [Validators.required]],
    'purposeofUseCode: ': [null, [Validators.required, Validators.maxLength(50)]],
    'purposeofUseDescription: ': [null, [Validators.required, Validators.maxLength(255)]]
  })

  addressPurposeChangeEvent(addressPurposeEvent) {
    this.cdr.detectChanges();
    this.editSharedForm.updateValueAndValidity();
    this.editSharedForm.patchValue({ addressPurpose : addressPurposeEvent });
    this.cdr.detectChanges();
    this.editSharedForm.updateValueAndValidity();
    this.cdr.detectChanges();
  }

调试器图片

注意:它从@Output 接收 addressPurposeEvent，它是一个带有值的下拉菜单，并将其发送到 Parent ，

Note: It receives addressPurposeEvent from an @Output, its a dropdown menu with values, and its send to the Parent ,

<app-address-purposeofuse-dropdown (addressPurposeChange)="addressPurposeChangeEvent($event)"></app-address-purposeofuse-dropdown>

更新:设置硬值也不起作用

this.editSharedForm.patchValue({ addressPurpose : { purposeofUseCode: 'test'}});

推荐答案

你应该尝试像这样更新

this.editSharedForm.get('addressPurpose').patchValue(addressPurposeEvent);

这将使您获得对组的控制权，您可以使用它的 patchValue，按照您的方式，我认为 angular 不会获得要更新的内容.希望能帮到你！

this will get you the control for the group and you can use its patchValue, with your way i dont think angular gets what to update. Hope it helps!

这篇关于Angular 8:PatchValue 不适用于 ChangeDetector 和 UpdateValue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！