我是 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>
单击编辑按钮时,它应该显示类似于下图的输入字段。
最佳答案
您可以使用 *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;
}
关于javascript - 在 Angular/Typescript 中单击按钮/图标时如何将文本字段设置为输入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53879566/