angular set error to form control and make it invalid in form group custom validator without the use-CodePudding

Can someone help me how to set the minTemperature error to temperature form control in this from group custom validator ? so when i type less then 26 when Celsius is selected it should be invalid and have the minTemperature error and the same when fahrenheit is selected and is less than 80.

custom validator

  getTemperatureAndUnitValidator(): ValidatorFn {
    return (form: FormGroup): { [key: string]: any } => {
      const temperatureControl = form.controls['temperature'];
      const selectedTemperatureControl = form.controls['temperatureUnit'];
      const temperature = temperatureControl.value;

      if (selectedTemperatureControl.value.code === 'F' && temperature < 80) {
        return { minTemperature: true };
      } else if (
        selectedTemperatureControl.value.code === 'C' &&
        temperature < 26
      ) {
        return { minTemperature: true };
      }
      return null;
    };
  }

form group

 this.heatIndexForm = new FormGroup(
      {
        temperature: new FormControl(null, [
          Validators.required,
          Validators.pattern(/^-?[0-9]\d*(\.\d )?$/),
        ]),
        humidity: new FormControl(null, [
          Validators.required,
          Validators.min(0),
          Validators.max(100),
          Validators.pattern(/^-?[0-9]\d*(\.\d )?$/),
        ]),
        temperatureUnit: new FormControl(new Temperature('Celsius', 'C')),
      },
      { validators: this.heatIndexService.getTemperatureAndUnitValidator() }
    );

validation error in html

 <div 
            *ngIf="temperatureUnit.value.code === 'F' &&
            heatIndexForm.get('temperature').hasError('minTemperature') &&
            heatIndexForm.controls['temperature'].dirty &&
            heatIndexForm.controls['temperature'].value">
            Temperature must be 80&deg;F or higher!
          </div>
  <div 
            *ngIf="temperatureUnit.value.code === 'C' &&
            heatIndexForm.controls['temperature'].hasError('minTemperature') &&
            heatIndexForm.controls['temperature'].dirty &&
            heatIndexForm.controls['temperature'].value">
            Temperature must be 26&deg;C or higher!
          </div>

i tried this in custom validator and its not working : (not triggering the validation error in template also the input is not applying red border, i am using pInputText and it has built in red border which is applied when input is invalid)

return {temperatureControl: { minTemperature: true }}

i dont want to use .setErrors

CodePudding user response：

The custom error it's about the formGroup, so you should use

<div  *ngIf="heatIndexForm.errors?.minTemperature">
   {{heatIndexForm.value.selectedTemperatureControl.code=='F'?
                'Temperature must be 80&deg;F or higher!':
                'Temperature must be 26&deg;C or higher!'}}
</div>

To add class to the input

<input [class.ng-invalid]="heatIndexForm.errors?.minTemperature &&
                           heatIndexForm.get('temperatureUnit').touched">
..
</input>

NOTE: you can in your validator function return a complex object, e.g.

{minTemperature:true,errorText:'Temperature must be 80&deg;F or higher!'}
//and 
{minTemperature:true,errorText:'Temperature must be 26&deg;C or higher!'}

To only show {{heatIndexForm.errors?.errorText}}