typescript - Set reactive form after data loaded (async) - Angular 5

Question

I am trying to update the form values after loading values from an API. I tried using the *ngIf technique but the form is not visible even when the form is set.

I am not able to share the full project, but here is the component template and controller

Template

<div class="page-title">
  <h3> Edit news </h3>
</div>
<div class="partner-add-form">
  <ng-container *ngIf='newsForm'>
    <form action="" [formGroup]='newsForm' (ngSubmit)="onSubmit()">
      <div class="row  ">
        <div class="input-field col s12 tooltip">
          <input formControlName='title' [id]="'title'" [type]="'text'">
          <label [for]="'title'">Title</label>
          <validator-errors [control]='newsForm.get("title")'></validator-errors>
        </div>
        <div class="input-field col s12 tooltip">
          <textarea class="materialize-textarea" formControlName='content' [id]="'content'"></textarea>
          <label [for]="'content'">Content</label>
          <validator-errors [control]='newsForm.get("content")'></validator-errors>
        </div>
        <div class="input-field col s12 margin-reset">
          <mat-form-field class="full-width">
            <mat-select [formControl]='newsForm.controls["partner_id"]'>
              <mat-option disabled selected>Categories</mat-option>
              <mat-option *ngFor="let partner of partners.data" [value]="partner.id">
              {{ partner.name }} </mat-option>
            </mat-select>
          </mat-form-field>
          <validator-errors [control]='newsForm.controls["partner_id"]'></validator-errors>
        </div>
        <div class="file-field col s12 input-field">
          <div class="btn">
            <span>File</span>
            <input (change)="fileChangeListener($event)" type="file"> </div>
          <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files"> </div>
        </div>
        <div class="col s12">
          <div class="flex flex-middle flex-center crop-area">
            <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
            <i class="material-icons">arrow_forward</i>
            <div class="result rounded z-depth-1">
              <img [src]="data.image " *ngIf="data.image " [width]="cropperSettings.croppedWidth"
                [height]="cropperSettings.croppedHeight"> </div>
          </div>
        </div>
        <div class="col s12 form-bottom">
          <div class="left">
            <button type="button" onclick='window.history.back()' class='btn btn-large waves-effect waves-light '>
              <i class="material-icons">keyboard_arrow_left</i>
              <span>Back</span>
            </button>
          </div>
          <div class="right">
            <button [ngClass]="{'disabled':(newsForm['invalid']) || isSubmitting || !data.image }" type="submit" class='btn btn-large waves-effect waves-light '>
            Submit </button>
          </div>
        </div>
      </div>
    </form>
  </ng-container>
</div>

Controller

  partners;

  news = {};
  newsForm: FormGroup;

  ngOnInit() {
    setTimeout(() => {
      this._dashboardService.routeChangeStarted();
    }, 0);
    this._activatedRoute.params.subscribe(params => {
      this.news["id"] = params["id"];
      this.getPartners().then(data => {
        this.getNews().then(data=>{
          this.setForm();
        })
      });
    });
  }

  setForm() {
    this.newsForm = this._formBuilder.group({
     title: [this.news['title'], [Validators.required]],
     content: [this.news['content'], [Validators.required]],
     partner_id: [this.news['partner']['id'], [Validators.required]]
    });
    console.log(new Boolean(this.newsForm));
  }

  getPartners() {
    return Promise((res, rej) => {
      setTimeout(() => {
        this._dashboardService.progressStarted();
        this._dashboardService.routeChangeStarted();
      }, 0);
      this._partnerService.getPartners().subscribe(
        partners => {
          if (partners.status == 200) {
            this.partners = partners;
            res(partners.data);
          } else {
            this._errorActions.errorHandler(partners.status);
          }
          setTimeout(() => {
            this._dashboardService.progressFinished();
            this._dashboardService.routeChangeFinished();
          }, 0);
        },
        error => {
          this._notificationService.warning("Ups, something went wrong");
        }
      );
    });
  }

  getNews() {
    setTimeout(() => {
      this._dashboardService.routeChangeStarted();
      this._dashboardService.progressStarted();
    }, 0);

    return Promise((res, rej) => {
      this._newsService.getNews(this.news["id"]).subscribe(
        data => {
          if (data["status"] == 200) {
            Object.assign(this.news, data["data"]);
            res(this.news);
          } else {
            this._errorActions.errorHandler(data["status"]);
          }
          setTimeout(() => {
            this._dashboardService.progressFinished();
            this._dashboardService.routeChangeFinished();
          }, 0);
        },
        error => {
          this._notificationService.error("Ups, something went wrong");
        }
      );
    });
  }

What is the problem? It doesn't even show the form itself after setting the form. Is there another way of setting the form values after loading the data from an API?

Answer 1

You can create a separate function to fill your form with data. You can call this function after getting data from an API.

Variant 1: setValue

Official angular documentation: setValue

With setValue, you assign every form control value at once by passing in a data object whose properties exactly match the form model behind the FormGroup.

Example:

updateValues(dataObject: any) {
  this.heroForm.setValue({
    name:    this.hero.name,
    address: this.hero.addresses[0] || new Address()
  });
}

Variant 2: patchValue

Official angular documentation: patchValue

With patchValue, you can assign values to specific controls in a FormGroup by supplying an object of key/value pairs for just the controls of interest.

Example:

updateValues(dataObject: any) {
  this.heroForm.patchValue({
    name: this.hero.name
  });
}