Angular 5 - снимите все флажки, функция не влияет на вид

Question

Я пытаюсь включить кнопку сброса в форму Reactive в Angular 5. Для всех полей формы сброс работает отлично, за исключением нескольких флажков, которые создаются динамически.

На самом деле сброс, по-видимому, происходит и для флажков, но результат не отображается в представлении.

service.component.html

<code><form [formGroup]="f" (ngSubmit)="submit()">
  <input type="hidden" id="$key" formControlName="$key">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" formControlName="name">
  </div>
  <br/>
  <p>Professionals</p>
  <div formArrayName="prof">
    <div *ngFor="let p of professionals | async; let i = index">
      <label class="form-check-label">
      <input class="form-check-input" type="checkbox (change)="onChange({name: p.name, id: p.$key}, $event.target.checked)" [checked]="f.controls.prof.value.indexOf(p.name) > -1"/>{{ p.name }}</label>
    </div>
    <pre>{{ f.value | json }}

Сохранить Сброс

service.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators, FormArray } from '@angular/forms'

import { AngularFireAuth } from 'angularfire2/auth';
import { Router, ActivatedRoute } from '@angular/router';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable} from 'angularfire2/database';
import { Service } from './service';

export class ServiceComponent implements OnInit {

  f: FormGroup;

  userId: string;
  $key: string;
  value: any;
  services: FirebaseListObservable<Service[]>;
  service: FirebaseObjectObservable<Service>;
  professionals: FirebaseListObservable<Service[]>;
  profs: FirebaseListObservable<Service[]>;

  constructor(private db: AngularFireDatabase, 
              private afAuth: AngularFireAuth,
              private route: ActivatedRoute, 
              private router: Router,
              private fb: FormBuilder) { 

    this.afAuth.authState.subscribe(user => {
      if(user) this.userId = user.uid
        this.services = db.list(`services/${this.userId}`);
    })

    this.afAuth.authState.subscribe(user => {
      if(user) this.userId = user.uid
        this.professionals = this.db.list(`professionals/${this.userId}`);
    })

  }

  ngOnInit() {   

    // build the form
    this.f = this.fb.group({
      $key: new FormControl(null),
      name: this.fb.control('', Validators.required),
      prof: this.fb.array([], Validators.required)
    })
  }

   onChange(name:string, isChecked: boolean) {
    const profArr = <FormArray>this.f.controls.prof;

    if(isChecked) {
      profArr.push(new FormControl(name));
      console.log(profArr.value);
    } else {
      let index = profArr.controls.findIndex(x => x.value == name)
      profArr.removeAt(index);
      console.log(profArr.value);
    }
  }

   resetForm(){
    let profArr = <FormArray>this.f.controls.prof;

    this.f.controls.name.setValue('');
    profArr.controls.map(x => x.patchValue(false));
    this.f.controls.$key.setValue(null);
   }
}

service.ts

export class Service {
    $key: string;
    name: string;
    professionals: string[];
  }

Результат кода выше, отображаемый в строке <pre> {{f.value | json}} </ pre>:

Когда я заполняю форму:

{
  "$key": null,
  "name": "Test service",
  "prof": [
    {
      "name": "Ana Marques",
      "id": "-LEZwqy3cI3ZoYykonWX"
    },
    {
      "name": "Pedro Campos",
      "id": "-LEZz8ksgp_kItb1u7RE"
    }
  ]
}

Когда я нажимаю кнопку сброса:

{
  "$key": null,
  "name": "",
  "prof": [
    false,
    false
  ]
}

Но флажки все еще установлены:

Чего не хватает?

Answer 1

Я бы прекратил использовать FormControls для обработки того, что в основном является состоянием.

У вас есть код, который загружает свойство professionals компонента. Просто добавьте к этим данным свойство checked и измените тип professionals на Service[]:

this.db.list(`professionals/${this.userId}`)
                          .subscribe(professionals => {
                            professionals.forEach(p => p.checked = false);
                            this.professionals = professional;
                          });

Кстати, у вас нет отмеченного свойства в вашем типе Service, поэтому вы либо расширяете его, либо преобразуете professionals во что-то другое (то есть a CheckableService).

Шаблон становится:

<div *ngFor="let p of professionals; let i = index">
  <label class="form-check-label">
  <input class="form-check-input" type="checkbox (change)="onChange(p, $event.target.checked)" [checked]="p.checked"/>{{ p.name }}</label>
</div>

И метод onChange становится:

onChange(professional: Service, isChecked: boolean) {
  professional.checked = isChecked;
  this.profArr = this.professionals.filter(p => p.checked);
}

Мне кажется, это намного чище (вам нужно будет настроить проверяемый параметр не на тип Service, но код просто адаптируется). Никаких проблем с элементами управления, только данные, чисто передаваемые через ваш компонент.

Answer 2

Это мой флажок проверки

    <input type="checkbox" value="a" (click)="checkAll" [checked]="checkAll">

Это обычный флажок, я использовал это в ngfor

<input type="checkbox" value="a" (click)="check(object)" name="checkbox" [checked]="true">

И функция checkall checkboxes

let elements = document.getElementsByTagName('input');
 if (this.checkAll) {
      this.checkAll = false;
      for (let i = 0; i < elements.length; i++) {
        if (elements[i].type == 'checkbox') {
          elements[i].checked = false;
        }
      }
    }
else....the other way

Answer 3

Вы не ссылаетесь на свои флажки. Дайте им имя, используя индекс.

<code><div formArrayName="prof">
  <div *ngFor="let p of professionals | async; let i = index">
    <label class="form-check-label">
    <input [formControlName]="i" class="form-check-input" type="checkbox (change)="onChange({name: p.name, id: p.$key}, $event.target.checked)" [checked]="f.controls.prof.value.indexOf(p.name) > -1"/>{{ p.name }}</label>
  </div>
  <pre>{{ f.value | json }}