How to make non editable form or textfield after click button Submit-CodePudding

                        <form [formGroup]="calculateForm">
                          
                          <div >
                            <p for="inputFrom" >Distance traveled(km):</p>
                            <div >
                              <input type="text" numbersOnly 
                                formControlName="distance">
                            </div>
                          </div>

                     
                                <button type="button" (click)="calculate()" >{{'Save | translate }}</button>
                            </div>
                          </div>
                          <br>
                        </form>

I want after fill the form and click Save button, the form will be non editable, only can see. Just one time fill in.I tried readonly but it for before click Button.

CodePudding user response：

to disable the form you can just call the this.calculateForm.disable(). To do so for the save button as well use in your function calculate a flag to disable the button when it's clicked. First introduce a new variable containing a boolean named isDisabled. You can bind to the disabled attribute of the DOM element with binding syntax. <button [disabled]="isDisabled" type="button" (click)="calculate()" >{{'Save | translate }}</button> . Set the isDisabled variable in the calculate function to true and the button which is bind to the variable will be disabled.

CodePudding user response：

In your calculate method, or in another method triggered by clicking the Save button, call this.calculateForm.disable().

To re enable the form, you can call it's enable() function.

You can also enable and disable individual controls.