Form fields default values in Angular 4

Question

Form field values need to initialize when data is available from service. I am using Reactive Form (Form Builder).

What I want is simply to get all the data from forms even if it's updated or not after submit.

Data is coming from getProfile() function, that is being called in ngOnInit().

After submitting the form only the updated fields data is available in (this.form) object but all the data came from userData are just ignored.

And for that reason my form never valid.

    async getProfile() {
            const observable = await this.userService.getProfile();
            observable.subscribe((res: any) => {
              this.userData= res.data;
            });
          }

      ngOnInit() {
        this.getProfile();
        this.user= {};

        this.form = this.formBuilder.group({
          firstName: ['', [

            Validators.pattern(new RegExp('^[a-zA-ZäöüÄÖÜ]*$'))
          ]],
          lastName: ['', [

            Validators.pattern(new RegExp('^[a-zA-ZäöüÄÖÜ]*$'))
          ]],
          email: ['', [
            Validators.email
          ]],
          city: ['', Validators.required],
          postalCode: ['', [

            Validators.minLength(5)
          ]],
          address1: [''],
          address2: '',
        });

      }

Template

<form *ngIf="form" [formGroup]="form" (ngSubmit)="saveUser()" novalidate>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="firstName">First name</label>
                <div class="input-group input-group-sm">
                  <input type="text" class="form-control" id="firstName" name="firstName" value="userData?.firstname" formControlName="firstName" placeholder="Your First Name">
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label for="lastName">Last name</label>
                <div class="input-group input-group-sm">
                  <input type="text" class="form-control" id="lastName" value="{{userData?.lastname}}" name="lastName" formControlName="lastName" placeholder="Your Last Name">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label for="postalCode">Email</label>
                <div class="input-group input-group-sm">
                  <input type="email" class="form-control input-sm" value="{{userData?.email}}" id="email" name="email" formControlName="email" placeholder="Your Email">
                </div>
              </div>
            </div>
          </div>
       </div>
      <br>
      <br>
      <br>
      <br>

      <button [disabled]="form.pristine" type="submit" class="btn btn-grad btn-tn">Update</button>
    </form>

Here is form view after page load

Answer 1

You are not updating the form after the response arrives. Try this:

observable.subscribe((res: any) => {
  this.form.patchValue(res.data);
});