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>
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,
});
}
}
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();
});
}
}