How do I change the status of the inputswitch in the form, depending upon the data from backend?

user_13718442 0
Viewed 302

Hi I am new to angular and I am using primeNg components in which I have a form and in my form I have a <p-inputswitch> tag and I have my JSON data coming from the backend and each record has

{...

"status": "ACTIVE"

....},

either the status is active or inactive. I want this inputSwitch to be in ON position if the status is Active else keep it in Off Position. This is what my input switch looks like

Also to mention - I have many no: of records which have status active or inactive.

This is my input formcontrolName

<div class="col-12">
    <p-inputSwitch onLabel="Active" offLabel="Inactive" formControlName="status" ></p-inputSwitch>                                          
</div>
primeng angular javascript
2 Answers

When you init the form via reactive forms (guess so since you are using formControlName).

your.component.html:

<form [formGroup]="form">
  <p-inputSwitch formControlName="status"></p-inputSwitch>
</form>
<div>
  {{ form.value | json }}
</div>
<button
  (click)="getBackendData()"
  pButton
  pRipple
  type="button"
  label="Get Backend Data"
  class="p-button-raised"
></button>

your.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

export interface BackendData {
  status: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  form: FormGroup;
  mockedBackendData: BackendData = {
    status: 'ACTIVE',
  };

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      status: [false],
    });
  }

  // Only for demonstration purpose
  // Try to never use setTimeout
  // here you put ur async side effect
  // retrieving the data from the backend
  getBackendData() {
    this.mockedBackendData.status =
      this.mockedBackendData.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE';

    this.form.patchValue({
      switch: this.mockedBackendData.status === 'ACTIVE' ? false : true,
    });
  }
}

Working Stackblitz

user_64495920

It looks like you're using ReactiveForms, here's a good way to do it: component.ts:

@Component({
  selector: 'component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss']
})
export class Component implements OnInit {
  public status: FormControl = new FormControl(false);
  public formGroup: FormGroup = new FormGroup({
    status: this.status
  });
  
  public constructor(private service: Service) { }

  public ngOnInit(): void {
    this.service.getStatus$().subscribe(status => {
      this.status.setValue(status);
      this.status.updateValueAndValidity();
    });
  }
}
user_111076720
Related