Реактивный элемент управления формы не работает на логическом, потому что значение не обновляется

Question

Я пытаюсь проверить группу флажков, чтобы они действовали, только если выбраны все четыре. Происходит следующее: переменная this.dataService.minRequired обновляется в службе, однако состояние проверки, похоже, не меняется. Я переместил его в свой сервис, думая, что это решит эту проблему, однако у меня была такая же проблема, когда переменная была в моем контроллере.

Тип используемого флажка не имеет значения «флажок» или какого-либо другого способа доступа к состоянию флажка, следовательно, все обходные пути. Я не могу отказаться от них, поэтому ищу решение в этих пределах.

card.component. html:

<xyz-checkbox-group orientation="vertical" ngDefaultControl [formControl]="newCardForm.get('eligibility')">
                    <div style="float: left; width: 45%;">
                            <xyz-checkbox ngDefaultControl [(checked)]="checkedFlag1" id="checkbox1" (change)="checker()">Account is Open and in Good Standing</xyz-checkbox>
                            <xyz-checkbox ngDefaultControl [(checked)]="checkedFlag2" id="checkbox2" (change)="checker()">Balance Less Than 30 Days Past Due</xyz-checkbox>
                            <xyz-checkbox ngDefaultControl [(checked)]="checkedFlag3" id="checkbox3" (change)="checker()">Annual Income - $200,000.00 (minimum)</xyz-checkbox>
                            <xyz-checkbox ngDefaultControl [(checked)]="checkedFlag4" id="checkbox4" (change)="checker()">Current Card Limit - $5,000.00</xyz-checkbox>
                        <display-error *ngIf="(submitted && newCardForm.get('eligibility').invalid) || (submitted && newCardForm.get('eligibility').invalid && newCardForm.get('eligibility').dirty)  || (submitted && newCardForm.errors.checks)" 
                        error="Only 'Client is a Student' is optional." class="alertLabel"></display-error>

card.component .ts:

  checkedFlag1: boolean;
  checkedFlag2: boolean;
  checkedFlag3: boolean;
  checkedFlag4: boolean;

  ngOnInit() {
    this.forms = new FormArray([
      this.accountDetailsForm = new FormGroup({
        productGroup: new FormControl('', {validators: Validators.required}),
      }), 
      this.newCardForm = new FormGroup({
        address: new FormControl('', {validators: Validators.required}),
        eligibility: new FormControl('', {validators: Validators.required})
        }, this.validateCheckboxes(this.dataService.minRequired)),
      ]);
  }

  public checker(){
    let checked = 0;
    this.checkboxArray = [];
    this.checkboxArray.push(
      this.checkedFlag1, this.checkedFlag2, this.checkedFlag3, this.checkedFlag4
    )

    for(let i  = 0; i < this.checkboxArray.length; i++){
      if(this.checkboxArray[i] == true){
        checked++; 
      }
    }

    if (checked == 4) {
      this.dataService.minRequired = true;
    } else {
      this.dataService.minRequired = false;
    }
  }

  public validateCheckboxes(boolean): ValidatorFn{
    return function validate (formGroup: FormGroup){

      console.log("entered with: " + boolean)
      if(!boolean){
        return {
          checks: true
        };
      }
      return null;
    }
  }

Answer 1

Передаваемый аргумент создается при создании функции, которая не реагирует на состояние вашей службы. Когда вы вводите функцию проверки, она эквивалентна

this.validateCheckboxes(false)

. Вы хотите написать асин c функцию, которая возвращает наблюдаемую. Затем вы можете изменить minRequired на наблюдаемую величину, которая выдает «true», когда выполняются правильные условия, которые затем объединяются с валидатором asyn c, чтобы вызвать ошибку или вызвать true на основе текущего состояния.

Дополнительную информацию можно найти в разделе пользовательских валидаторов angular документов: https://angular.io/guide/form-validation