Angular значения флажков - PullRequest
Новая
       19

Angular значения флажков

1 голос
/ 21 января 2020

У меня проблемы с установкой значений checkbox в форме. Проблема, которую я не могу решить, заключается в том, что когда я хочу обновить форму и получить для нее данные, все checkboxes каждый раз возвращают значение true и отображаются как проверенные, даже если checkboxes имеют значение false (не проверено).

вот мой компонент: 

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

}

и мой 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>

после того, как я установил их для обновления, все работает и получает правильный статус checkboxes и сохранены в таблице, но если я хочу обновить их, они всегда отображаются как отмеченные в форме, любой совет, почему это происходит?

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

Итак, после нескольких попыток мне наконец-то удалось checkbox показать текущее состояние, которое им нужно.

Вот как я это сделал: 

    this.httpClientService.getEmployeeById(+userId)
      .subscribe(data => {
        this.user = data;
        this.user.enabled = this.formatCheckboxesToTrueOrFalse(this.user.enabled);
        this.user.admin = this.formatCheckboxesToTrueOrFalse(this.user.admin);
        this.user.supervisor = this.formatCheckboxesToTrueOrFalse(this.user.supervisor);
        this.editForm.patchValue(data);
        console.log(data);
      });
  }

  formatCheckboxesToTrueOrFalse(checkbox) {
    let formattedCheckboxes = null
    switch (checkbox) {
      case 'Y': formattedCheckboxes = true;

        break;
      case 'N': formattedCheckboxes = false;

        break;
      default:
        break;
    }
    return formattedCheckboxes;
  }

Мне пришлось их отформатировать поскольку они получили значение из базы данных («Y» для проверенного и «N» для непроверенного) и подписались на эти отформатированные данные, и теперь это работает!

0 голосов
/ 21 января 2020

Я думаю, это потому, что при каждом изменении вы устанавливаете значение флажков в непустую строку, которая приводит к true. Вы также должны убедиться, что структура данных запроса, который вы делаете, соответствует форме: 

interface Employee {
    ...
    enabled: boolean;
    admin: boolean;
    supervisor: boolean;
    ...
}

В подписке на изменения вам вообще не нужно устанавливать значение, флажки переключаются и сохранить значение в FormGroup автоматически.

...