javascript - 具有内置禁用/重新启用功能的按钮组件(防止双重提交!)

Question

处理表单组件本身上的所有“禁用”验证逻辑是否只是一个好的经验法则？听起来对吗？

我真的只是想找到一种在应用程序中共享“禁用”逻辑的方法，而不是在每个表单组件中重复它，但我想这是做事的正确方法？有人可以验证一下吗？

我想创建一个可重用的提交按钮组件。此提交按钮组件应该像任何其他提交按钮组件一样工作，除了一件事......

提交按钮在点击后需要“自行禁用”。这应该很容易吧。然而，这里的问题是按钮还需要在“调用”100% 完成后“重新启用自身”。 (如果出现错误，或者应用程序需要在第一个操作完成后允许另一个操作等)。

我希望 100% 的“那个”逻辑存在于组件内部，这样我就可以轻松地在应用程序中的任何地方重用它。

我以为这会很容易，但我想我仍然错过了一些东西......我想这个想法是最好使用 @Input() (或者可能是 Output)，以便将一些“异步回调类型的东西”传递给按钮控件本身......

这样按钮就可以对“异步回调类型的事物”完成使用react，并使用回调处理程序重新启用自身。

提前感谢您的帮助!

Answer 1

我编写了一个抽象类，我一直在这种情况下使用它:

import { ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { FormGroup, FormGroupDirective } from '@angular/forms';

export abstract class FormBase<T = any> {
    @Input() isSubmitting: boolean;

    @Output('onSubmit') _submit = new EventEmitter<T>();

    @ViewChild(FormGroupDirective, { static: true })
    ngForm: FormGroupDirective;

    @ViewChild('submitButton', { static: true }) button: ElementRef;

    form: FormGroup;

    onSubmit(): void {
        if (this.isFormValid()) this._submit.emit(this.getFormValue());
    }

    submit(): void {
        if (!this.button || !this.button.nativeElement) return;

        this.button.nativeElement.click();
    }

    reset(value?: any) {
        this.ngForm.resetForm(value);
    }

    isFormValid(): boolean {
        return this.form.valid;
    }

    getFormValue(): T {
        return this.form.value;
    }

    shouldDisable(): boolean {
        return (
            this.isSubmitting ||
            ((this.form.invalid || this.form.pending) &&
                (this.ngForm ? this.ngForm.submitted : true))
        );
    }
}

组件.ts

import { FormBase } from 'path';

@Component({
    ...
})
export class FormComponent extends FormBase {
    constructor(formBuilder: FormBuilder) {
        super();
        this.form = formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required],
        });
    }
}

组件.html

<form (ngSubmit)="onSubmit()" [formGroup]="form">
    <mat-form-field>
        <mat-label>Username</mat-label>
        <input matInput type="text" formControlName="username" />
    </mat-form-field>
    <mat-form-field>
        <mat-label>Password</mat-label>
        <input matInput type="text" formControlName="password" />
    </mat-form-field>
    <button [disabled]="shouldDisable()" mat-flat-button color="primary">
        Submit
    </button>
</form>

你的表单组件基本上是从这个类扩展而来的，它应该在 99% 的时间里都能工作。如果您的组件需要一些非常具体的功能，例如更改按钮禁用时间或其他功能，您可以简单地重写 FormComponent 中的方法。