Angular reactive forms disabled group

Question

I'm using Angular reactive forms. On my page I need to optionally enable/disable fields (current password and new password + confirmation) so that I could use form.value and get only those things I need (disabled controls won't be in there). However, I've found the approach of disabling FormControl however, I need to disable whole group.

That's my group

formGroup: FormGroup = this.fb.group({
...
        password: this.fb.group({
            current: ['', Validators.required],
            new: this.fb.group({
                password: [{
                    value: '',
                    disabled: this.changePassword.value
                }, Validators.required],
                passwordConfirm: [{
                    value: '',
                    disabled: this.changePassword.value
                }, Validators.required]
            }, {validator: PasswordValidator.MatchPassword})
        })
    });

And this doesn't really work. How do I disable the whole password FormGroup by attaching disabled state to standalone FormControl (checkbox).

Answer 1

you can open fieldset tag inside the form tag and use disable directive according to the form control value

<fieldset [disabled]="changePassword">

Answer 2

Solved by

ngOnInit() {
        this.formGroup.get('password').enable();
        // changePassword: FormControl
        this.changePassword.valueChanges.subscribe(e => {
            if (!this.changePassword.value) {
                this.formGroup.get('password').disable();
            } else {
                this.formGroup.get('password').enable();
            }
        });
    }