Hola, soy nuevo en angular y estoy usando componentes primeNg en los que tengo un formulario y en mi formulario tengo una etiqueta <p-inputswitch> y tengo mis datos JSON provenientes del backend y cada registro tiene
{...
"status": "ACTIVE"
....},
el estado es activo o inactivo. Quiero que este inputSwitch esté en la posición ON si el estado es Active; de lo contrario, manténgalo en la posición Off. Así es como se ve mi interruptor de entrada
También mencionar: tengo muchos no: de registros que tienen estado activo o inactivo.
Este es mi nombre de control de formulario de entrada
<div class="col-12"> <p-inputSwitch onLabel="Active" offLabel="Inactive" formControlName="status" ></p-inputSwitch> </div>Cuando inicia el formulario a través de formularios reactivos (suponga que sí, ya que está utilizando formControlName).
su.componente.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>su.componente.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, }); } }Parece que está usando ReactiveForms, esta es una buena manera de hacerlo: componente.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(); }); } }