Angular form status validator 2

Question

I'm trying to write custom form validator.

I have two component main-form and options. In options component I have list of checkboxes, and would like to validate, that on each row is checked at least one option.

https://stackblitz.com/edit/stackblitz-starters-quy57f

On option component I have validation method, and in case some row is invalid I emit this to main-component. On main-component I have property, which react on this emittor. There is also form validator, which should react on this isInvalid property:

<form #inputForm="ngForm" appFormStatusValidator [isInvalid]="isInvalid">

But inside of the validator, the isInvalid property is false, even if property on the form is true (and vice versa).

Could you please tell me, what I'm doing wrong?

I expect, when I check option1 on each row, that status of the main-form would be 'VALID'. But in the console log i see:

options component: is INvalid: false main form - isInvalid: false validator: is invalid: true

Why is property isInvalid true inside validator even if I set isInvalid to false on the main-form component?

Thanks a lot for any advice.

Answer 1

We can simply just provide the IDs as input to the directive and the directive will use these values and loop through the form control values and apply the logic which will determine if the form is valid or not.

But please not, when you add or remove a value into the array that is used for the *ngFor then you need to change the reference of the array by doing

this.item.options = [...this.item.options]; // will inform the directive that you 
// have changed the values in the array, this will create a 
// new refernce of the array and directive will recognize it!

directive

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, ValidationErrors, FormGroup } from '@angular/forms';

@Directive({
  selector: '[appFormStatusValidator]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: FormStatusValidatorDirective,
      multi: true,
    },
  ],
})
export class FormStatusValidatorDirective {
  @Input() appFormStatusValidator: Array<number> = [];

  validate(control: FormGroup): ValidationErrors | null {
    console.log('options in validator: ', control);

    if (!this.appFormStatusValidator) return null;
    const invalid = !this.appFormStatusValidator.every((id: number) => {
      const controls = control.controls;
      return (
        controls?.[`option1_${id}`]?.value ||
        controls?.[`option2_${id}`]?.value ||
        controls?.[`option3_${id}`]?.value
      );
    });

    return invalid ? { formStatusInvalid: true } : null;
  }
}

main form.com.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { DataInterface } from '../data.interface';

@Component({
  selector: 'app-main-form',
  templateUrl: './main-form.component.html',
  styleUrls: ['./main-form.component.css'],
})
export class MainFormComponent implements OnInit {
  constructor() {}

  @ViewChild('inputForm') inputForm?: NgForm;

  item: DataInterface = {
    id: 1,
    name: 'test',
    options: [{ id: 1 }, { id: 2 }, { id: 3 }],
  };

  isInvalid: boolean = true;

  ngOnInit() {}
}

main form com.html

<div>
  {{ item | json }}
</div>


<form #inputForm="ngForm" [appFormStatusValidator]="item.options" [optionsNumber]="3">
  <hr/>

  <app-options [item]="item"/>

  <hr/>
  <div>
    <span>is invalid (main component): {{ isInvalid }}</span>
  </div>
  <div>
    <span>form status: {{ inputForm.form.status}}</span>
  </div>
  <div>
    <span>form errors: {{ inputForm.form.errors | json}}</span>
  </div>
  <hr/>
  <button [disabled]="inputForm.form.invalid">
    Submit
  </button>

</form>

options.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ControlContainer, Form, NgForm } from '@angular/forms';
import { DataInterface, OptionInterface } from '../data.interface';

@Component({
  selector: 'app-options',
  templateUrl: './options.component.html',
  styleUrls: ['./options.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
})
export class OptionsComponent implements OnInit {
  @Input() item: DataInterface | null = null;
  @Output() optionChanged: EventEmitter<void> = new EventEmitter<void>();

  constructor(private controlContainer: ControlContainer) {}

  ngOnInit() {
    if (this.item && !this.item?.options) {
      this.item.options = [];
    }
  }
}

options.html

<ng-container *ngIf="item">
  <div>
    <!-- <span>is invalid (inside option component): {{ form?. }}</span> -->
  </div>
  <br />
  <div>
    <div *ngFor="let opt of item.options" style="margin-bottom: 20px">
      <mat-checkbox name="option1_{{ opt.id }}" [(ngModel)]="opt.option1"
        >Option1
      </mat-checkbox>
      <span> | </span>
      <mat-checkbox name="option2_{{ opt.id }}" [(ngModel)]="opt.option2"
        >Option2
      </mat-checkbox>
      <span> | </span>
      <mat-checkbox name="option3_{{ opt.id }}" [(ngModel)]="opt.option3"
        >Option3
      </mat-checkbox>
    </div>
  </div>
</ng-container>
{{ item?.options | json }}

stackblitz