CODEWITHSUNDEEP
htmlangular
PawelC
PawelC

Reputation: 1226

Disable form to edit, enable if click button

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

Upvotes: 4

Views: 3308

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 3

Related Questions