can we check form is disabled or not in angular reactive form?

Question

I am using the reactive form in my angular9 for form validation. now I need to hide the submit button which is percent outside of this form, if the form is disabled(all the field in the form is disabled). is there any variable or method percent in formgroup to achieve this?

formValidationConfig() {
        this.userDataUpdateForm = new FormBuilder().group({
            language: [''],
            firstname: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(20), Validators.pattern('^(?!_)^[a-zA-Z0-9_]*$')]],
            lastname: ['', Validators.pattern('^(?!_)^[a-zA-Z0-9_]*$')],
            gender: ['', Validators.required],
            pan: [''],
            mobile: ['', [Validators.minLength(10), Validators.maxLength(10)]],
            email: ['', Validators.email],
            address: [''],
            pincode: [''],
            city: [''],
            state: [''],
            country: [''],
            day: ['', Validators.required],
            month: ['' , Validators.required],
            year: ['', Validators.required],
            otp: ['']
        });
    }

    disableFields() {
        try {
            if (this.userProfileData.pref_lang.length > 0) { this.f.language.disable(); }
            if (this.userProfileData.firstname?.length > 0) { this.f.firstname.disable(); }
            if (this.userProfileData.lastname?.length > 0) { this.f.lastname.disable(); }
            if (this.userProfileData.gender?.length > 0) { this.f.gender.disable(); }
            if (this.userProfileData.pan_number.length > 0) { this.f.pan.disable(); }
            if (this.userProfileData.language?.length > 0) { this.f.language.disable(); }
            if (this.userProfileData?.email_status === 'active') { this.f.email.disable(); }
            if (this.userProfileData?.mobile_verification === '1') { this.f.mobile.disable(); }
            if (this.userProfileData?.address?.length > 0) { this.f.address.disable(); }
            if (this.userProfileData?.pincode?.length > 0) { this.f.pincode.disable(); }
            if (this.userProfileData?.city?.length > 0) { this.f.city.disable(); }
            if (this.userProfileData?.state_name?.length > 0) { this.f.state.disable(); }
            if (this.userProfileData?.country?.length > 0) { this.f.country.disable(); }
            if (this.userProfileData.day) { this.f.day.disable(); }
            if (this.userProfileData.month ) { this.f.month.disable(); }
            if (this.userProfileData.year) { this.f.year.disable(); }
        } catch (error) { console.log('Profile disabled error', error); }
        console.log('disabled obj--->');
    }

Answer 1

Without knowing your exact situation, you can try something like this:

<button *ngIf="!form.disabled">Save</button>

Form Group has a disabled property, which will be true if the form group is set to disabled.