我们可以检查表单是否禁用角度反应形式吗?



我在我的 angular9 中使用反应式表单进行表单验证。 现在我需要隐藏提交按钮,如果表单被禁用(表单中的所有字段都被禁用(,则该按钮位于此表单之外的百分比。 表单组中是否有任何变量或方法百分比来实现此目的?

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--->');
}

在不知道您的确切情况的情况下,您可以尝试如下操作:

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

窗体组具有"已禁用"属性,如果窗体组设置为"已禁用",则该属性将为 true。

最新更新