Angular - Custom form component not reflect value immediate to parent form group value

Question

Facing issue with value propogation from custom form component.

If write any in Jobtitle, it will reflect directly from current to top form group. Same thing does not work in the custom component which is auto-add-input. While writing in feeMode, then only reflect in the same formControl.

but, then now, if start to write in company name, then all value updated up to top form group

Have created stackblitz as below

https://stackblitz.com/edit/angular-auto-add-input?file=src/app/app.component.html

Please help me what i missed here.

reactive form group

professional = this.fb.group({
    application: this.fb.group({
      jobTitle: ['', [Validators.required]],
      feeModel: this.fb.array([this.fb.control('', [Validators.required])], [Validators.required]),
      companyName: ['', [Validators.required]],
    })
  });

custom component:

 @Component({
  selector: 'shared-auto-add-input',
  templateUrl: './auto-add-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AutoAddInputComponent),
      multi: true
    }
  ]
})
export class AutoAddInputComponent implements OnInit, AfterViewInit {

  @Input() label: string;
  @Input() placeholder: string;
  @Input() max: number;
  @Input() formArrayName: string;
  @Input() errors: ErrorModel[];

  arrayControl: FormArray;
  form: FormGroup;

  constructor(
    @Optional() @Host() @SkipSelf()
    private controlContainer: ControlContainer,
    private fb: FormBuilder,
  ) { }

  ngOnInit() {
    if (!this.formArrayName) {
      throw new TypeError('\'formArrayName\' is required.');
    }
    this.form = this.fb.group({
      option: this.controlContainer.control.get(this.formArrayName)
    });
    this.arrayControl = this.form.get('option') as FormArray;
  }

  ngAfterViewInit() {
  }

  addOption() {
    this.arrayControl.push(this.fb.control('', this.controlContainer.control.get(this.formArrayName).validator));
  }

  removeOption(index: number) {
    this.arrayControl.removeAt(index);
  }

  stopNew(option, i) {
    return option.value === ''
      || i !== this.arrayControl.controls.length - 1
      || (this.max && this.arrayControl.controls.length === +this.max);
  }

  getErrors(error: FormControl) {
    let result = [];
    if (this.errors) {
      result = this.errors.filter((message) => {
        return error.hasError(message.key);
      });
    }
    return result;
  }
}

Rajesh Panda Rajesh Panda · Accepted Answer · 2019-09-19T15:19:21

The value is changed but there is no event triggered to re-render the values of the absolute parent object. In the child component you are operating under a new form with only the reference of the original formControl or formarray.

this.fb({}) creates a new form. The control values are changed as the reference is same but then it fails to render the new value as there is no trigger from the parent form which the parent page has been tracking.

That's why it is always a formgroup that is passed to child so that you do not create a new formgroup in there. Doing that, the formgroup is tracked just fine. Here is a quick modification of your code. I have used formcontrol as it is easier but then you can use the same trick with formArrays.

https://stackblitz.com/edit/angular-xchddm

Angular - Custom form component not reflect value immediate to parent form group value

3 Answers