在 Angular 表单中进行一些更正后重新启用提交按钮
Re-Enable Submit button after doing some Corrections in an Angular Form
我正在使用具有 Reactive 形式的 Angular8。最初我会禁用“提交”按钮,直到整个表单都填满了有效数据。
<div>
<form>
...........
</for>
<button [disabled]="checkifSaveEnabled() || submitted"
(click)="createNewPlan()">Save</button>
</div>
在 class (TS) 文件中:
checkifSaveEnabled() {
if (this.formCreateNewPlan.pristine || !this.formCreateNewPlan.valid) {
return true;
}
return false;
}
createNewPlan(): void {
this.submitted = true;
this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
if (result.success && result.data.planId > 0) {
...
}
}
这里,
- 最初,提交按钮将处于禁用模式。
- 输入所有表单值后,按钮将启用。
- 提交表单后,按钮将再次禁用。
我想要的是 - 提交后,如果我从 API 中收到错误(比如“重复记录”),我需要在表单值中进行一些更正。进行更正后,我需要再次启用该按钮。如何做到这一点?
试试这个...
HTML
<form [formGroup]="formCreateNewPlan">
................
<button [disabled]="!this.formCreateNewPlan.valid && submitted"
(click)="createNewPlan()">Save</button>
</form>
TS
submitted = true;
createNewPlan(): void {
this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
if (result.success && result.data.planId > 0) {
...
this.submitted = false;
}
}
我通过在 finalize() 下添加表单订阅解决了这个问题
createNewPlan(): void {
this.myservice.create(this.formCreateNewPlan.value)
.pipe(finalize(() => {
this.formCreateNewPlan.valueChanges.subscribe(v =>
{
if (v.name) {
this.submitted = false;
}
});
}))
.subscribe(result => {
if (result.success && result.data.planId > 0) {
...
this.submitted = false;
}
}
在您的 .ts 文件中创建一个 属性 public submitted = false
。这将检测表单提交状态。
创建一个 getter 方法 get isFormValid(): boolean {}
。这将检测表单有效状态。
public submitted = false;
get isFormValid(): boolean {
return this.formCreateNewPlan.valid && !this.submitted;
}
在 API.
成功或错误响应后重置提交状态
createNewPlan(): void {
this.submitted = true;
this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
if (result.success && result.data.planId > 0) {
...
}
this.submitted = false;
}
在您的按钮上添加 isFormValid 方法以启用或禁用它。
<button [disabled]="!isFormValid" (click)="createNewPlan()">Save</button>
我正在使用具有 Reactive 形式的 Angular8。最初我会禁用“提交”按钮,直到整个表单都填满了有效数据。
<div>
<form>
...........
</for>
<button [disabled]="checkifSaveEnabled() || submitted"
(click)="createNewPlan()">Save</button>
</div>
在 class (TS) 文件中:
checkifSaveEnabled() {
if (this.formCreateNewPlan.pristine || !this.formCreateNewPlan.valid) {
return true;
}
return false;
}
createNewPlan(): void {
this.submitted = true;
this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
if (result.success && result.data.planId > 0) {
...
}
}
这里,
- 最初,提交按钮将处于禁用模式。
- 输入所有表单值后,按钮将启用。
- 提交表单后,按钮将再次禁用。
我想要的是 - 提交后,如果我从 API 中收到错误(比如“重复记录”),我需要在表单值中进行一些更正。进行更正后,我需要再次启用该按钮。如何做到这一点?
试试这个...
HTML
<form [formGroup]="formCreateNewPlan">
................
<button [disabled]="!this.formCreateNewPlan.valid && submitted"
(click)="createNewPlan()">Save</button>
</form>
TS
submitted = true;
createNewPlan(): void {
this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
if (result.success && result.data.planId > 0) {
...
this.submitted = false;
}
}
我通过在 finalize() 下添加表单订阅解决了这个问题
createNewPlan(): void {
this.myservice.create(this.formCreateNewPlan.value)
.pipe(finalize(() => {
this.formCreateNewPlan.valueChanges.subscribe(v =>
{
if (v.name) {
this.submitted = false;
}
});
}))
.subscribe(result => {
if (result.success && result.data.planId > 0) {
...
this.submitted = false;
}
}
在您的 .ts 文件中创建一个 属性 public submitted = false
。这将检测表单提交状态。
创建一个 getter 方法 get isFormValid(): boolean {}
。这将检测表单有效状态。
public submitted = false;
get isFormValid(): boolean {
return this.formCreateNewPlan.valid && !this.submitted;
}
在 API.
成功或错误响应后重置提交状态createNewPlan(): void {
this.submitted = true;
this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
if (result.success && result.data.planId > 0) {
...
}
this.submitted = false;
}
在您的按钮上添加 isFormValid 方法以启用或禁用它。
<button [disabled]="!isFormValid" (click)="createNewPlan()">Save</button>