Javascript 在Angular/Typescript中单击按钮/图标时，如何将文本字段转换为输入字段？

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

姓名


姓名
创建#创建-铅笔图标
取消
您需要使用布尔变量来控制内容。根据您创建表单控件或表单组的方式：

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


{{formGroupVar.controls['givenName'].value}
…代码的其余部分

这是最简单的方法。但是逻辑是相同的。
您可以使用显示或隐藏编辑/提交按钮

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>

单击时使用ngif条件创建两个div第一个为false，第二个为true。{{show？hide'：'show'}
isEditEnable : boolean = true; // to show and hide the edit button

name : any;

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