我們可以在 angular 反應式表單中檢查表單是否被禁用？

Question

我在 angular9 中使用響應式表單進行表單驗證。 現在我需要隱藏這個表單之外的提交按鈕，如果表單被禁用（表單中的所有字段都被禁用）。 formgroup 中是否有任何變量或方法百分比來實現這一點？

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

在不知道您的確切情況的情況下，您可以嘗試以下操作：

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

表單組有一個 disabled 屬性，如果表單組設置為禁用，則該屬性為 true。