Input property is undefined in custom validator function - Angular

Question

I have the following form with custom validators:

this.Form = this.fb.group({
      cruiseId: new FormControl(this.leg.cruiseId),
      startDate: new FormControl(this.leg.startDate, [Validators.required]),
      endDate: new FormControl(this.leg.endDate)
    }, { validators: [this.checkDuplicates, this.checkDates] });

In my component, I have an input property which contains all departure dates for a cruise (@Input() cruiseArray!: cruiseItem[];). Using the checkDuplicates function, I want to verify that we don't have 2 identical departure dates for the same cruise.

checkDuplicates(group: FormGroup) {   
    console.log(this.cruiseArray);
    let sDate = group.get('startDate')?.value;
    if (sDate !== null && this.cruiseArray.find(x => x.startDate === sDate))
    {
      return { invalidDuplicate: true }
    }       
    return null;
  }

My concern is that this.cruiseArray is alway undefined. If I try the following in my component

ngOnInit(): void {
    console.log(this.cruiseArray);
  }

it works perfectly and my array returned by the parent is populated.

Full code:

  @Component({
      selector: ..,
      templateUrl: ..,
      styleUrls: [..]
    })
    export class MyComponent implements OnInit {
      Input() cruiseArray!: cruiseItem[];
    
    ....
    ngOnInit(): void {
            console.log(this.cruiseArray); <--- DOES WORK
          }
    ....
ngOnChanges(changes: SimpleChanges) {       
    this.createForm();
  }
    ....
      createForm() {
        this.Form = this.fb.group({
              cruiseId: new FormControl(this.leg.cruiseId),
              startDate: new FormControl(this.leg.startDate, [Validators.required]),
              endDate: new FormControl(this.leg.endDate)
            }, { validators: [this.checkDuplicates, this.checkDates] });
      }
    
    ....
    
      checkDuplicates(group: FormGroup) {   
            console.log(this.cruiseArray); <--- DOES NOT WORK
            let sDate = group.get('startDate')?.value;
            if (sDate !== null && this.cruiseArray.find(x => x.startDate === sDate))
            {
              return { invalidDuplicate: true }
            }       
            return null;
          }
      }
    }

Why this.cruiseArray is undefined in my validator function even when it is populated elsewhere in my component.

Mr. Stash · Accepted Answer · 2022-11-25 16:34:59Z

0

The validator function is inside the class, 'this' keyword inside the validator does not point to the class object, so binding the class object with the method should solve the problem

validators: [this.checkDuplicates.bind(this), this.checkDates]

answered Nov 25, 2022 at 16:34

Mr. Stash

3,2284 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

An Nguyen · Accepted Answer · 2022-11-25 14:35:34Z

0

Use changeDetection: ChangeDetectionStrategy.OnPush (more info here), or assign cruiseArray = [...] in parents component. If you use cruiseArray.push() or cruiseArray.pop() in parents component, it won't trigger ngOnChanges (same issue here).

Moreover, if you have multiple Input(), you should call this.createForm() with condition:

ngOnChanges(changes: SimpleChanges) {
    if (changes['cruiseArray']) {
        this.createForm();
    }
}

answered Nov 25, 2022 at 14:35

An Nguyen

1591 gold badge2 silver badges9 bronze badges

Comments

Chady BAGHDADI · Accepted Answer · 2022-11-25 14:43:13Z

0

may be you need to check that property :

 @Input() cruiseArray: !: cruiseItem[];

 ngOnChanges(changes: SimpleChanges): void {
    if(changes['cruiseArray']) {
        this.checkDuplicates(group: FormGroup)
    }
  }

edited Nov 25, 2022 at 14:43

answered Nov 25, 2022 at 14:10

Chady BAGHDADI

3132 silver badges9 bronze badges

1 Comment

Sylvain C. Over a year ago

Same result, the input property is still undefined. My createForm is called by ngOnChanges.

Collectives™ on Stack Overflow

Input property is undefined in custom validator function - Angular

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related