angular - Update formArray without valueChanges emiting

Question

Have form like this:

    this.form = this.fb.group({
      name: [null, [Validators.required]],
      companyHolderUid: [null],
      generalDescription: [null],
      authority: [TemplateAuthorities.Root],
      tabs: this.fb.array([]),
      tagReferences: this.fb.array([]),
    }, { updateOn: 'blur' });

I want to update tabs or tagReferences without triggering valueChanges. Something like this { emitEvent: false, onlySelf: true }

When using patchValue and trying to console tabs is empty

  private formInit(template: AssetTemplate) {
    this.form.patchValue({
      name: template.name,
      companyHolderUid: template.companyHolderUid,
      generalDescription: template.generalDescription,
      authority: template.authority,
      tabs: [1,2,3,4]
    }, { emitEvent: false, onlySelf: true });
    console.log(JSON.stringify(this.form.value));

  }

console.log result:

{
   "name":"test template",
  "companyHolderUid":null,
  "generalDescription":"Lorem ipsum",
  "authority":"ROOT",
  "tabs":[],
  "tagReferences":[]
}

question from:https://stackoverflow.com/questions/65643636/update-formarray-without-valuechanges-emiting

Answer 1

Use the patchValue method.
You can pass the whole form value, or update specific fields only if you will.

const newValue = [];
this.form.patchValue({ tabs: newValue }, { emitEvent: false });