在Angular / Typescript中单击按钮/图标时，如何使文本字段成为输入字段？

Question

我是Angular 6的新手，我想在单击按钮/图标时将文本字段更改为输入字段。以下提供部分代码和预期输出。预先感谢。

<div>
   <mat-form-field appearance ="outline">
       <mat-label>Given Name</mat-label>
          <input matInput placeholder="Given name" name="givenName" formControlName="givenName">
       <mat-icon matSuffix">create</mat-icon> #create - pencil icon
   </mat-form-field>
</div>

单击编辑按钮时，它应该显示与下一张图像相似的输入字段。

更改内容（例如，纽约到波士顿）后，应该显示类似于下一张图片的文本字段。

Answer 1

<div *ngIf="show; else elseBlock">
  <mat-form-field appearance="outline">
    <mat-label>Given Name</mat-label>

    <mat-icon matSuffix>create</mat-icon> #create - pencil icon
  </mat-form-field>
</div>
<ng-template #elseBlock> <input matInput placeholder="Given name " name="givenName " formControlName="givenName ">
  <mat-icon matSuffix ">Save</mat-icon>
    <mat-icon matSuffix ">Cancel</mat-icon>
</ng-template>

您可以在show单击时将变量mat-icon matSuffix更改为false。

Answer 2

您需要使用布尔变量来控制内容。取决于您如何创建窗体控件或窗体组：

<div *ngIf="show">
{{formGroupVar.controls['givenName'].value}} 
<button (click)="show !=show">
</button>
</div>
<div *ngIf="!show"> ...rest of your code </div>  

这是最简单的方法。但是逻辑是一样的。

Answer 3

您可以使用*ngIf显示或隐藏编辑/提交按钮

HTML代码：

<h3>Edit form</h3>
<div>
    <mat-form-field class="example-full-width" *ngIf="isEditEnable">
        <input matInput placeholder="Enter name" [(ngModel)]="name">
  </mat-form-field>
  <span *ngIf="!isEditEnable">Name : {{name}}</span>
</div>
<div class="example-button-row">
  <button mat-raised-button color="primary" *ngIf="!isEditEnable" (click)="onEdit()">Edit</button>
  <button *ngIf="isEditEnable" mat-raised-button color="primary" (click)="onEdit()">Submit</button> 
</div>

在TS代码中：

isEditEnable : boolean = true; // to show and hide the edit button

name : any;

onEdit(){
    this.isEditEnable =!this.isEditEnable;
}

WORKING DEMO