mardi 21 janvier 2020

Angular checkbox values

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