当表单已经有 form.valid 字段设置为 [disabled] 字段时，在提交表单后禁用按钮

Question

I have a reactive form, which consists of a button and two other fields.

I have set a validator. If validator is true, I am enabling the button via 'FormName.valid' and similarly if it's false, the button is disabled

What I want?

I want to disable button, after clicking on Submit button as well

What I tried?

I tried FormName.reset() , which does disable the button, but then it shows errors in the background for empty two fields, while my spinner is running. (So, I don't want to do like this)

HTML:

<form [formGroup]="FormName" (ngSubmit)=sendData()>
       // Two other fields here
        <div id="frame-send-button" text-center>
            <button [disabled]="!FormName.valid" type="submit">
                Submit
            </button>
</form>

Typescript

Form Initialization

this.FormName= new FormGroup({
        field1: new FormControl(this.field1value, Validators.required),
        field2: new FormControl(this.field2value)
    }, IsFutureValidator('somevalidator'));

Any suggestions?

Answer 1

document.yourQuerySelector('submitForm').setAttribute('disabled');

This will add an attribute of your choice to any element. "Disabled" will work in this case.