Disable form to edit, enable if click button - html

Question

I have the following problem, I made the form:
<button class="btn btn-success">Edit form</button><div class="container" style="width:300px;">
<form method="POST" role="form" #formName = "ngForm" >
<div class="form-group">
<label form="username">Username: </label>
<input type="text" name="username" value="" class="form-control" [disabled]="true">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input type="text" name="password" value="" class="form-control" [disabled] = "true">
</div>
<input type="hidden" value="" name="password_confirm">
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
By default, the fields are to have disabled status so that they can not be edited, now I would like the form to be available for editing after clicking the Edit form button and the hidden field as text. Unfortunately, for now, I have no idea how to go about it :(

Answer 1

Give this a try:
<button class="btn btn-success" (click)="onTogglenotEditMode()">Edit form</button>
<div class="container" style="width:300px;">
<form method="POST" role="form" #formName = "ngForm" >
<div class="form-group">
<label form="username">Username: </label>
<input type="text" name="username" value="" class="form-control" [disabled]="notEditMode">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input type="text" name="password" value="" class="form-control" [disabled] = "notEditMode">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input *ngIf="!notEditMode" type="text" value="" name="password_confirm">
</div>
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
And in the Component:
import { Component } from '#angular/core';
#Component({...})
export class AppComponent {
notEditMode = true;
onTogglenotEditMode() {
this.notEditMode = !this.notEditMode;
}
}
Here's a Working Sample StackBlitz for your ref.