angular reactive form toggle validation required?

Question

I have this radio button asking (do you have massage certificate?) if yes it will show the file input. I want this file input not required be default and if the user select yes it will become required. I have this code below that set cert validation to null by default and if has has_cert become true then set cert validator but its not working.. I need your help guys. Thanks in advance.

<p>Form value: {{ form.value | json }}</p>
<p>cert input : {{ form.get('cert').status | json }}</p>

.ts

form: FormGroup;
has_cert = new FormControl(false || true);
has_exp = new FormControl(false || true);
ngOnInit(): void {

    this.form = new FormGroup({
        ...
        has_cert: new FormControl(''),
        cert: new FormControl(''),
        ...
    })

    this.form.get("cert").setValidators(null);

    this.form.get('has_cert').valueChanges.pipe(
        filter(value => value === false || null)
    ).subscribe(
        () => this.form.get('cert').setValue(''),
        () => this.form.get("cert").setValidators(null)
    );

    this.form.get("has_cert").valueChanges.pipe(
        filter(value => value === true)
    ).subscribe(
        () => this.form.get("cert").setValidators(
            [
                Validators.required,
                Validators.pattern('^.*\.(doc|DOC|docx|DOCX|pdf|PDF)$')
            ]
        )
    );
}

What's not working for you? Cross field validation or enable/disable of cert? — Mir entafaz Ali
– Mir entafaz Ali, Commented Apr 26, 2021 at 4:45
I yes, I want to enable validation when user select yes and disable validation when user select no — frustrated-dev
– frustrated-dev, Commented Apr 26, 2021 at 5:08
You can use Cross Field validation angular.io/guide/form-validation#cross-field-validation — Nikhil Walvekar
– Nikhil Walvekar, Commented Apr 26, 2021 at 6:27

Zhengzhe Li · Accepted Answer · 2021-04-26 04:41:50Z

2

You need to use form.get('something').setValidators(...) for each cases.

answered Apr 26, 2021 at 4:41

Zhengzhe Li

1,8361 gold badge22 silver badges31 bronze badges

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

2 Comments

frustrated-dev Over a year ago

Hi @Liu Zhang, I have tried that but Ican't remove the validator if has_cert become false this.form.get('has_cert').valueChanges.pipe( filter(value => value === false)) .subscribe(() => this.form.get('cert').setValue(''), () => this.form.get('cert').setValidators([]) );

frustrated-dev Over a year ago

Hi, I have updated the code in my question

MARS · Accepted Answer · 2021-04-28 19:43:21Z

1

To add to @Liu Zhang's answer, I believe you can use clearValidators to remove all the validators you added with setValidators.

answered Apr 28, 2021 at 19:43

MARS

5851 gold badge10 silver badges28 bronze badges

Collectives™ on Stack Overflow

angular reactive form toggle validation required?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related