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

}

这是您推荐的Working Sample StackBlitz。

禁用表格进行编辑，如果单击按钮，则启用

1 个答案: