Отключить форму для редактирования, включить, если нажать кнопку

Question

У меня есть следующая проблема, я сделал форму:

<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>

По умолчанию поля должны иметь статус отключен, чтобы их нельзя было редактировать, теперь я хотел бы, чтобы форма была доступнадля редактирования после нажатия кнопки Изменить форму и скрытого поля в виде текста.К сожалению, пока я не знаю, как это сделать: (

Answer 1

Попробуйте:

<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>

А в компоненте:

import { Component } from '@angular/core';

@Component({...})
export class AppComponent {
  notEditMode = true;

  onTogglenotEditMode() {
    this.notEditMode = !this.notEditMode;
  }

}

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.