Angular,使用 [disabled] 禁用提交按钮以检查表单有效性
Angular, Disable submit button using [disabled] to check form validity
我正在尝试使用 [disable]=form.controls[...].invalid
条件检查禁用提交按钮。如果输入字段为空或 invalid
,则应禁用提交按钮。但看起来我做错了。当我填充一些字段并将某些字段留空时,该按钮被禁用,第一个输入字段除外。当我填写第一个输入字段时,按钮变为启用状态(而其他输入字段仍为空或 invalid
)。
//component.ts
form01: FormGroup;
public myDatePickerOptions: IMyDpOptions = {
dateFormat: 'dd-mmm-yyyy',
};
setDate(): void {
let date = new Date();
this.form01.patchValue({
DoB: {
date: {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
}
}
});
}
clearDate(): void {
this.form01.patchValue({
DoB: null
});
}
constructor(public builder: FormBuilder) {
this.form01 = this.builder.group({
email: [null, Validators.required], //text
DoB: [null, Validators.required], //radio button
gender: [null, Validators.required], //date picker
});
}
results: object = new Object();
functionForm01() {
this.results = [{
{
"email": this.form01.controls.email.value
},
{
"DoB": this.form01.controls.DoB.value
},
{
"gender": this.form01.controls.gender.value
}
}]
console.log(this.result);
this.form01.reset();
}
<!--component.html-->
<div>
<form [formGroup]="form01">
email:<input type="text" name="email" formControlName="email" required/> gender:
<input type="radio" name="gender" formControlName="gender" value="male"> male<br>
<input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
<my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>
<button type="submit" [disabled]="form01.controls['email' || 'DoB' || 'gender'].invalid" (click)="functionForm01()">Click</button>
</form>
</div>
我正在使用 Angular 打字稿和来自 this link 的 myDatePicker
包。谁能帮帮我?
由于您有 formGroup 对象,如果 form01 无效,您可以禁用该按钮
<!--component.html-->
<div>
<form [formGroup]="form01">
email:<input type="text" name="email" formControlName="email" required/> gender:
<input type="radio" name="gender" formControlName="gender" value="male"> male<br>
<input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
<my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>
<button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>
</form>
</div>
您可以通过检查表单的有效性来 enable/disable 按钮:
<button type="submit" [disabled]="!disableBtn">Click</button>
在您的组件内:
let disableBtn = false;
this. form01.valueChanges
.subscribe((changedObj: any) => {
this.disableBtn = this. form01.valid;
});
或通过HTML:
<button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>
您需要在 imports import { FormsModule, ReactiveFormsModule } from '@angular/forms';
下的 app.module.ts 中导入 FormsModule
@NgModule({
imports: [
FormsModule
])}
我正在尝试使用 [disable]=form.controls[...].invalid
条件检查禁用提交按钮。如果输入字段为空或 invalid
,则应禁用提交按钮。但看起来我做错了。当我填充一些字段并将某些字段留空时,该按钮被禁用,第一个输入字段除外。当我填写第一个输入字段时,按钮变为启用状态(而其他输入字段仍为空或 invalid
)。
//component.ts
form01: FormGroup;
public myDatePickerOptions: IMyDpOptions = {
dateFormat: 'dd-mmm-yyyy',
};
setDate(): void {
let date = new Date();
this.form01.patchValue({
DoB: {
date: {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
}
}
});
}
clearDate(): void {
this.form01.patchValue({
DoB: null
});
}
constructor(public builder: FormBuilder) {
this.form01 = this.builder.group({
email: [null, Validators.required], //text
DoB: [null, Validators.required], //radio button
gender: [null, Validators.required], //date picker
});
}
results: object = new Object();
functionForm01() {
this.results = [{
{
"email": this.form01.controls.email.value
},
{
"DoB": this.form01.controls.DoB.value
},
{
"gender": this.form01.controls.gender.value
}
}]
console.log(this.result);
this.form01.reset();
}
<!--component.html-->
<div>
<form [formGroup]="form01">
email:<input type="text" name="email" formControlName="email" required/> gender:
<input type="radio" name="gender" formControlName="gender" value="male"> male<br>
<input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
<my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>
<button type="submit" [disabled]="form01.controls['email' || 'DoB' || 'gender'].invalid" (click)="functionForm01()">Click</button>
</form>
</div>
我正在使用 Angular 打字稿和来自 this link 的 myDatePicker
包。谁能帮帮我?
由于您有 formGroup 对象,如果 form01 无效,您可以禁用该按钮
<!--component.html-->
<div>
<form [formGroup]="form01">
email:<input type="text" name="email" formControlName="email" required/> gender:
<input type="radio" name="gender" formControlName="gender" value="male"> male<br>
<input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
<my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>
<button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>
</form>
</div>
您可以通过检查表单的有效性来 enable/disable 按钮:
<button type="submit" [disabled]="!disableBtn">Click</button>
在您的组件内:
let disableBtn = false;
this. form01.valueChanges
.subscribe((changedObj: any) => {
this.disableBtn = this. form01.valid;
});
或通过HTML:
<button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>
您需要在 imports import { FormsModule, ReactiveFormsModule } from '@angular/forms';
下的 app.module.ts 中导入 FormsModule@NgModule({
imports: [
FormsModule
])}