I have trouble with setting the checkbox
values in a form. The problem i can't solve is that when i want to update a form and I get the data for it all the checkboxes
return true every time and shown as checked even when the checkboxes
are false(unchecked).
here is my component:
import { Component, OnInit, Inject } from '@angular/core';
import { Router } from "@angular/router";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { HttpClientService, Employee } from '../service/http-client.service';
@Component({
selector: 'app-edit-employee',
templateUrl: './edit-employee.component.html',
styleUrls: ['./edit-employee.component.css']
})
export class EditEmployeeComponent implements OnInit {
user: Employee;
editForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
private router: Router,
private httpClientService: HttpClientService) { }
ngOnInit() {
let userId = window.localStorage.getItem("editEmployeeId");
if (!userId) {
alert("Invalid action.")
this.router.navigate(['employee']);
return;
}
this.editForm = this.formBuilder.group({
enabled: [''],
admin: [''],
supervisor: ['']
});
this.editForm.setErrors({ required: true });
this.editForm.valueChanges.subscribe((newValue) => {
let enabledCheckbox = (newValue.enabled) ? 'Y' : 'N';
let adminCheckbox = (newValue.admin) ? 'Y' : 'N';
let supervisorCheckbox = (newValue.supervisor) ? 'Y' : 'N';
newValue.enabled = enabledCheckbox;
newValue.admin = adminCheckbox;
newValue.supervisor = supervisorCheckbox;
if (newValue.admin === true || newValue.supervisor === true) {
this.editForm.setErrors(null);
} else {
this.editForm.setErrors({ required: true });
}
});
this.httpClientService.getEmployeeById(+userId)
.subscribe(data => {
this.editForm.patchValue(data);
});
}
onSubmit() {
this.httpClientService.updateEmployee(this.editForm.value)
.subscribe(
data => {
this.router.navigate(['employee']);
},
error => {
// alert(error);
});
}
}
and my html:
<div class="col-md-6">
<h2 class="text-center">Edit user</h2>
<form [formGroup]="editForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<mat-checkbox formControlName="enabled" class="form-control" color="primary">
Enabled</mat-checkbox>
</div>
<div class="form-group">
<mat-checkbox formControlName="admin" class="form-control" color="primary">
Admin</mat-checkbox>
</div>
<div class="form-group">
<mat-checkbox formControlName="supervisor" class="form-control" color="primary">
Supervisor</mat-checkbox>
</div>
<div class="form-group">
<button mat-raised-button color="primary" type="button" class="btn btn-success" (click)="onSubmit()"
routerLink="/">Update</button>
</div>
</form>
</div>
after I set them for the update everything works and get the right status of the checkboxes
and saved in the table but if i want to update then they are always shown as checked in the form, any advice why this happens?
Aucun commentaire:
Enregistrer un commentaire