CODEWITHSUNDEEP
angulartypescriptangular-forms
Chris
Chris

Reputation: 442

How to define required FormControls for non-required FormGroup?

In my application I have a FormGroup that isn't required to submit the form, but, if the user attempts to fill out any part of that group, there are specific fields that need to be present in it, or the group should be considered invalid.

Is there a way to define required fields for a non-required FormGroup so that I can guarantee data integrity?

This is my Group

FormGroup({
    officeId: new FormControl("", [Validators.required]),
    fileOwner: fileOwner,
    secondaryOwner: secondaryOwner,
    managedByPrimary: new FormControl(true, [Validators.required])
});

Here is my FileOwner FormGroup, which I've labeled as a required group

let fileOwner: FormGroup = new FormGroup({
    FirstName: new FormControl("", [Validators.required]),
    LastName: new FormControl("", [Validators.required]),
    IdentificationNumber: new FormControl("", [Validators.required]),
    PhoneNumber: new FormControl(""),
    EmailAddress: new FormControl("")
}, [Validators.required]);

Here I am attempting to more-or-less say this group is required for the form to be submitted, and in this group the FirstName, LastName and IdentificationNumber are required.

The SecondaryOwner is closely modeled after this as it is the same model with different validation requirements

let secondaryOwner: FormGroup = new FormGroup({
    FirstName: new FormControl("", [Validators.required]),
    LastName: new FormControl("", [Validators.required]),
    IdentificationNumber: new FormControl("", [Validators.required]),
    PhoneNumber: new FormControl(""),
    EmailAddress: new FormControl("")
});

Here I've not made the group required, but indicated that specific fields are required. My intent was to more-ore-less say, "This group isn't required, but if you fill it out these are necessary fields for the group to be considered valid"

How would I accomplish this kind of behaviour? Right now the SecondaryOwner instantiates as Invalid which makes sense. But essentially, unless any one of its controls become dirty I don't want it to be considered for validations.

Upvotes: 2

Views: 4958

Answers (1)

FussinHussin
FussinHussin

Reputation: 1814

I would suggestion dynamically updating the form. Have the form required state effected by something else. Here are a couple ideas:

  1. start the form without the required validator and listen for the form event 'dirty' or add a click event to the form, when the user clicks it, change the form validator to 'required'..

  2. add a separate input or button, that the user can click saying 'yes I want to complete this form' or whatever you like, then you could have an ngIf on the form if the user decides to fill it out. or you could handle the required validator like above but using this external input.

  3. if you only want to require the form if the user actaully enters data, listen for the form values in the change event. when a value is added, update the form to required.

in either case your form required function could look like this:

requireForm() {
    this.myForm.setValidators(Validators.required)
}

you could also check out this post on adding validators dynamically

Upvotes: 1

Related Questions