angular reactive forms and button disabling/enabling

Question

I am using below code in component.html

<button class="btn btn-primary" [disabled]="!projectForm.valid"
                    (click)="updateProjects()">Update</button>

Component.ts code is below

  this.projectForm = this.formBuilder.group({
      Name: new FormControl('', [Validators.required, Validators.pattern('^[a-zA-Z1-9][a-zA-Z1-9, _-]+$')]),
      ProjectID: new FormControl({ value: 'SQ123', disabled: true }),
      ProjectTypeID: new FormControl({ value: null, disabled: true}),
      ProjectSubTypeID: new FormControl({ value: null, disabled: true}),
      LifecycleTemplate: new FormControl('Plan', [Validators.required]),
      ConstructionTypeID: new FormControl({ value: null, disabled: true }, [Validators.required]),
      ContractTypeID: new FormControl({ value: null, disabled: true }, [Validators.required]),
      StartDate: new FormControl('', [Validators.required]),
      StartDateSub: new FormControl('', [Validators.required]),
      EndDate: new FormControl(''),
      EndDateSub: new FormControl(''),
      ProjectAddress: new FormControl({ value: null, disabled: true }, [Validators.required]),
      Description: new FormControl(''),
    });
    this.projectForm.controls['StartDateSub'].valueChanges.subscribe(value => {
      this.validateStartandEndDataSub();
    });
    this.projectForm.controls['EndDateSub'].valueChanges.subscribe(value => {
      this.validateStartandEndDataSub();
    });

while using the this.validateStartandEndDataSub(); function update button is not enabling due to this.validateStartandEndDataSub(); how to resolve the error to enable update button after filling all the values

  validateStartandEndDataSub() {
    const startDate = this.projectFormControls['StartDateSub'].value;
    const endDate = this.projectFormControls['EndDateSub'].value;
    if (endDate) {
      if (startDate > endDate) {
        this.projectFormControls['EndDateSub'].setErrors({ 'incorrect': true });
      } else {
        this.projectFormControls['EndDateSub'].setErrors({'incorrect': false});
      }
    }
  }

Can you please provide the code for validateStartandEndDataSub function? — j3ff
– j3ff, Commented Mar 19, 2019 at 14:26
write a custom validator function (angular.io/guide/form-validation) instead of doing this routine. work within the framework instead of coding around it. — bryan60
– bryan60, Commented Mar 19, 2019 at 14:35
@bryan60, is it possible to create custom validators with multiple controls(startdate, end date) — Santhosh
– Santhosh, Commented Mar 19, 2019 at 14:38
yes, add it at the formgroup level. you then have access to all controls within the group. — bryan60
– bryan60, Commented Mar 19, 2019 at 14:41

bryan60 · Accepted Answer · 2019-03-19 15:04:54Z

1

write a custom validator and add it at the form group level:

export function startBeforeEndValidator(startProp, endProp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const startCtrl = control.get(startProp);
    const endCtrl = control.get(endProp);
    const start = startCtrl ? startCtrl.value : null;
    const end = endCtrl ? endCtrl.value : null;
    return (start && end && start > end) ? {endBeforeStart: true} : null;
  };
}

then just register it like any other validator with your from group and the control properties as arguments.

edited Mar 19, 2019 at 15:04

answered Mar 19, 2019 at 14:47

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

angular reactive forms and button disabling/enabling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related