angular reactive forms - Unable to set custom validation massage in textfield onSubmit()

Question

I am trying to set error msg to branchId Input text field which is not working on first click. Next time when I click submit it shows the error massage

My form

   ngOnInit() {
     this.form = this.fb.group({
       BRANCH_ID: ['', 
          [   Validators.required,
              .....
           ],
        ]

   this.form.controls.branchId.valueChanges
       .subscribe(uploadBranchId => {
           if (uploadBranchId === '1234') {
                 this.form.controls.branchId.setErrors({'salesBranch': true})
              }
         });
    }

my error store library

    branchId: {
       ....
      salesBranch: 'Please provide valid branchId',
    },

Form Submit event

    onSubmit(){

    combineWithStream.call(
      this,
      masterErrorProgramme({
        fieldMap: this.fieldMap,
        controls: this.form.controls,
        errorStore: this.errorStore,
        scrollToError: true,
        formId: ''
      }).fieldMap
    );
    if (this.form.valid) {
     this.branchId = this.form.controls.branchId.value;
     // check branchId in Database
     this.serviceName.pipe(first()).subscribe((res) => {
     // If branchId is not found in Database
       if (res == "ID_NOT_FOUND") {
            this.form.controls.branchId.setErrors({'salesBranch': true})
       } else{
            this._router.navigate(somePath)
       }
      })
   }
  }

the first subscribe even works perfectly fine want same thing happens in onSubmit(). this.form.controls.branchId.setErrors({'salesBranch': true}) in formmControls it is setting

errors:
salesBranch: true
__proto__: Object

but not updating in UI/browser. Please help.

Try this:https://stackoverflow.com/questions/42197806/what-is-updatevalueandvalidity — Chellappan வ, May 18 '19 at 06:41
@Chellappan doing `this.form.controls.branchId.setErrors({'salesBranch': true}); this.form.controls.branchId.updateValueAndValidity();` is setting form as valid `enabled: (...) errors: null invalid: (...) parent: (...) pending: (...) pristine: false root: (...) status: "VALID"` — user2359466, May 18 '19 at 06:49

angular reactive forms - Unable to set custom validation massage in textfield onSubmit()

0 Answers0