How to show validation error for each row for email and fax for loop items using angular8

Question

I am using Angular8 with bootstrap. I have made inputs from a loop array. If there is any validation error for email or fax number, it is throwing validation error. Then, if there is an error for the email field in the first row, if there is any error for fax in second row it shows. if in the 3rd row if email is entered incorrectly and then corrected, the first row validation error also goes off.

I want to show validation error for all rows of there is an error with respect to fax or email fields.

HTML:

              
              
                
                  Please enter valid email
              
              
              
                Please enter valid fax number

TS:

  public validationErrorOnFocusOut(name, data) {
    if (name == "emailvalid") {
      if (data.controls.recipients.status === "VALID") {
        this.emailsubmitted = false;
      } else {
        this.emailsubmitted = true;
      }
      if (
        data.controls.recipients.value === "" ||
        data.controls.recipients.value === null
      ) {
        this.emailsubmitted = false;
      }
    } else if (name == "fax") {
      if (data.controls.recipients.status === "VALID") {
        this.faxsubmitted = false;
      } else {
        this.faxsubmitted = true;
      }
      if (
        data.controls.recipients.value === "" ||
        data.controls.recipients.value === null
      ) {
        this.faxsubmitted = false;
      }
    }
  }

DEMO

user_13680115 · Answer

You have set up your form correctly using the FormBuilder. My Solution will focus on the Reactivity of your form

Below are the steps I have taken

Remove the binding on [disabled] property https://stackoverflow.com/a/58831653/13680115 Below is a warning in the console thrown if you do include [disabled] property


It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.

Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});

Remove the onChange event handler. In its place we will have below in our ngOninit function. We will watch for form valuechanges and react to this to disable the appropriate control

      this.printListControl.valueChanges
      .pipe(
        distinctUntilChanged(),
        tap((controls: any[]) => {
          controls.forEach(({ mail, deliveryMethodId }, index) => {
            const control = this.printListControl.at(index);

            if (mail) {
              control.get("deliveryMethodId").enable({ emitEvent: false });
              control.get("recipients").enable({ emitEvent: false });
            } else {
              // I would not include below two lines for better user experience.
              control
                .get("deliveryMethodId")
                .setValue(null, { emitEvent: false });
              control.get("recipients").setValue(null, { emitEvent: false });

              control.get("deliveryMethodId").disable({ emitEvent: false });
              control.get("recipients").disable({ emitEvent: false });
            }

            // console.log(deliveryMethodId);

            control
              .get("recipients")
              .setValidators(this.getRecipientsValidation(deliveryMethodId));
          });
        })
      )
      .subscribe();
  }
  getRecipientsValidation(deliveryMethodId) {
    return +deliveryMethodId === 178
      ? [Validators.pattern(this.emailPattern), Validators.required]
      : +deliveryMethodId === 179
      ? [
          Validators.minLength(10),
            (10),
          Validators.required
        ]
      : [Validators.required];
  }

Now whenever the mail value is changed the deliveryMethodId and recipients control are enabled or disabled

Also we update the validators based on the delivery method selected

Remove the pattern validations from the html. We will use Validators.pattern

We can declare the patterns

emailPattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

Remove the event for validationErrorOnFocusOut from the template
Since we have removed the template validation, we can employ the use of Validator static classes

    let printList = this.printListArray.map(x => {
      const { deliveryMethodId } = x;
      return this.fb.group({
        id: x.id,
        name: x.name,
        mail: x.mail,
        electronics: x.electronics,
        deliveryMethodId: x.deliveryMethodId,
        recipients: [
          x.recipients,
          {
            validators:
              deliveryMethodId === 178
                ? [Validators.pattern(this.emailPattern), Validators.required]
                : deliveryMethodId === 179
                ? [
                    Validators.minLength(10),
                    Validators.maxLength(10),
                    Validators.required
                  ]
                : [Validators.required],
            updateOn: "blur"
          }
        ]
      });
    });

We are applying validation to each control individally to avoid their effect on other controls

Finally our html will be something like this


  
    
      
      
        {{data.value.name}}

        
          
        
        
          
        
        

          
        
        
          
            

            
              Please enter valid email
            
          
          
            

            
              Please enter valid fax number
            
          
          
            
            
              Field is required

DEMO HERE

How to show validation error for each row for email and fax for loop items using angular8

1 Answers