yup.validate only returns single field in errors array

Question

I am trying to add yup in an angular7 project. I have added it successfully to my component.

  readonly optionalRequiredSchema = yup.object().shape({
    ['@name']: yup.string().required(),
    description: yup.string().required(),
    ['rule-type']: yup.string().required(),
    from: yup.object().required(),
    source: yup.object().required(),
    to: yup.object().required(),
    destination: yup.object().required(),
    service: yup.object().required(),
    application: yup.object().required(),
    action: yup.string().required()
  });

I am validating like this

  validateData() {
    this.optionalRequiredSchema.validate(this.allData)
      .then(
        (data) => console.log(data)
      ).catch(err => {
        console.log(err);
        this.showToast('top-right', 'danger', JSON.stringify(err.errors))


      })
  }

If i pass all empty object to validate it only give 1 field in errors array. when i correc that than it shows next 1 field. how can i get list of all invalid fields.

Thanks

Answer 1

Yup validate function accept second argument options. Pass {abortEarly: false} will fix your issue

  validateData() {
    this.optionalRequiredSchema.validate(this.allData, {abortEarly: false})
      .then(
        (data) => console.log(data)
      ).catch(err => {
        console.log(err);
        this.showToast('top-right', 'danger', JSON.stringify(err.errors))


      })
  }