0

I was developing a test application and had one problem with validation. I have created form and binded it with FormGroup object:

<form [formGroup]="form" (ngSubmit)="addOrEditSensor()">
      <div class="block">
        <p
          [ngClass]="((name.errors?.required && name.touched) || (name.errors?.maxlength)) ? 'error' : 'error hidden'"
        >
          Fill this field. Length should be less then 30 symbols
        </p>
        <div class="input-block">
          <label class="label" for="name">Name</label>
          <input class="input_text" id="name" type="text" placeholder="Name" formControlName="name">
        </div>
      </div>
...

  private fillForm(){
    this.form = new FormGroup({
      id: new FormControl(this.sensor.id),
      name: new FormControl(this.sensor.name, [Validators.required, Validators.maxLength(30)]),
      model: new FormControl(this.sensor.model, [Validators.required, Validators.maxLength(15)]),
      range_from: new FormControl(this.sensor.range_from, [Validators.required]),
      range_to: new FormControl(this.sensor.range_to, [Validators.required]),
      type: new FormControl(this.sensor.type, [Validators.required]),
      unit: new FormControl(this.sensor.unit, [Validators.required]),
      location: new FormControl(this.sensor.location, [Validators.required, Validators.maxLength(40)]),
      description: new FormControl(this.sensor.description, [Validators.required, Validators.maxLength(200)])
    })
  }

All standart validation works correctly, like that: enter image description here

And now i got a new task. I have number inputs 'range from' and 'range to' and i have to create a custom validator, which checks if from less then to. So i created a custom function and added this validator:

  checkRange(control: FormControl){
    if (control.value >= this.form.value.range_to){
      return {invalidRange: true}
    }
    return null
  }

range_from: new FormControl(this.sensor.range_from, [Validators.required, this.checkRange])

And after that my modal breaks and I got a lot of errors and my form is undefined: enter image description here

Matvey Androsyuk
  • 47
  • 1
  • 6

1 Answers1

0

verify that the valitor function is not inside the class . to get the value use that syntax

this.form.controls['your form control name'].value
Chady BAGHDADI
  • 203
  • 2
  • 7
  • oh, it shouldn't be in class, didn't know that, thank you – Matvey Androsyuk Nov 27 '22 at 20:30
  • so, how to realize this function if it will be not in class, can u help me? – Matvey Androsyuk Nov 27 '22 at 20:33
  • i made something like that: ` function checkRange(to: number): ValidatorFn{ return (control: AbstractControl): {[key: string] : boolean} | null => { if (control.value !== undefined && (isNaN(control.value)) && control.value >= to){ return {'invalidRange': true} } return null; } }` but form doesn't works anyway and i get errors – Matvey Androsyuk Nov 27 '22 at 20:42
  • See this link and tell me : https://stackoverflow.com/questions/74573880/input-property-is-undefined-in-custom-validator-function-angular#74574049 – Chady BAGHDADI Nov 27 '22 at 21:44
  • and what ? i can't understand, now my function is not inside the class https://ru.stackoverflow.com/questions/1471770/%d0%9f%d1%80%d0%b8-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%b8%d0%b8-custom-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b0%d1%86%d0%b8%d0%b8-formgroup-%d0%bb%d0%be%d0%bc%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%b8-%d1%80%d0%b0%d0%b2%d0%bd%d1%8f%d0%b5%d1%82%d1%81%d1%8f-undefined – Matvey Androsyuk Nov 27 '22 at 21:48
  • Just verify that You call the fillForm in the ngOnint , I type for you how to get the value from form ..and in the link you found the bind method to use the validators function outside the class.. – Chady BAGHDADI Nov 27 '22 at 21:56
  • no, i call this function in ngOnChanges – Matvey Androsyuk Nov 27 '22 at 22:01
  • Your question is like the question in the link that I send to you just focus and will be ok – Chady BAGHDADI Nov 27 '22 at 22:03
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249932/discussion-between-matvey-androsyuk-and-chady-baghdadi). – Matvey Androsyuk Nov 27 '22 at 22:09
  • https://www.youtube.com/watch?v=mK0CX-68hBE&ab_channel=CodeShotsWithProfanis this video helped me – Matvey Androsyuk Nov 27 '22 at 22:54