input field not updating dynamically in angular 11 reactive form

Question

I am working on an angular project and want to update my reactive form field dynamically and data is coming from the API named getNextCode(). I call API service in

ngOnInit(): void {

this.NextCodeService.getNextCode().subscribe(
      (data: any) => {

        this.nextCode = data;
        this.f.code.setValue(this.nextCode);
        this.f.code.disable();

      }, (err: any) => this.handleErr(err)
    );
}

I am using form control to update my input field. When I open the form, field is disabled and its value is set from the getNextCode() API. But field input value is not set and disable call does not work.

Answer 1

The reason that the field you are trying to change isn't updating because it can't find the field you are trying to update in the reactive form since you are trying to access the field directly.

Change your code from this:

this.f.code.setValue(this.nextCode);
this.f.code.disable();

To:

this.frmGroup.get('code').setValue(this.nextCode);
this.frmGroup.get('code').disable();