如何在 Angular2 中禁用动态表单

Posted 2023-03-13

【中文标题】如何在 Angular2 中禁用动态表单

【英文标题】：How to disable a Dynamic forms in Angular2

【发布时间】：2018-06-07 06:45:06

【问题描述】：

我创建了一个基于 JSON 中的 data[fields] 的动态表单，但我需要先禁用该表单，这样当我们单击“编辑”时，只有表单可以编辑。

这是我的表单代码：

<div class="col-md-8 " [ngSwitch]="fieldInfo.dataTypeName">
<input *ngSwitchCase="'Text'" 
       class="form-control" 
       [(ngModel)]="pageInfoBeans.nameValueMap[fieldInfo.name]" 
       name="fieldInfo.name"
       [required]="fieldInfo.preRequiredInd" 
       [maxLength]="fieldInfo.fieldSize">    

<input *ngSwitchCase="'Email Address'" 
       type="email"  
       class="form-control" 
       [(ngModel)]="pageInfoBeans.nameValueMap[fieldInfo.name]" 
       name="fieldInfo.name"
       [required]="fieldInfo.preRequiredInd" 
       [maxLength]="fieldInfo.fieldSize">

在我的组件 html 中，它从上面的 switch case 填充：

<app-form class="" [fieldInfo]="fieldItem.fieldInfo" [pageInfoBeans]="pageInfoBeans"></app-form>

【参考方案1】：

你需要做这样的事情：

<button class='form-control' (click)='isEditable = !isEditable'>Edit Mode</button>

<div class="col-md-8 " *ngIf='isEditable' [ngSwitch]="fieldInfo.dataTypeName">
  <input *ngSwitchCase="'Text'" 
     class="form-control" 
     [(ngModel)]="pageInfoBeans.nameValueMap[fieldInfo.name]" 
     name="fieldInfo.name"
     [required]="fieldInfo.preRequiredInd" 
     [maxLength]="fieldInfo.fieldSize" />    

  <input *ngSwitchCase="'Email Address'" 
     type="email"  
     class="form-control" 
     [(ngModel)]="pageInfoBeans.nameValueMap[fieldInfo.name]" 
     name="fieldInfo.name"
     [required]="fieldInfo.preRequiredInd" 
     [maxLength]="fieldInfo.fieldSize" />
</div>

【参考方案2】：

@Directive(
  selector : ["canbedisabled"]
)
export class Canbedisabled

constructor(private el: ElementRef) 



  @Input()
  set blocked(blocked : boolean)
    this.el.nativeElement.disabled = blocked;
  


 <input formControlName="first" canbedisabled [blocked]="isDisabled">

您可以使用指令来解决它。例如，一个名为 Canbedisabled 的指令和一个属性“blocked”。为阻塞编写一个设置器并将其设置为 nativelement.disabled 属性。

参考：https://github.com/angular/angular/issues/11271

【参考方案3】：

最初将表单设置为禁用。

component.ts

showForm?:boolean = false;

component.html

<button (click)="showForm = !showForm">Edit</button>

<form *ngIf="showForm">
...form markup
</form>

【参考方案4】：

[disabled]="!isEditable" where initialize isEditable = 'disabled' 这可以添加到文本和电子邮件输入字段中。

您还可以在编辑按钮中添加点击回调，您可以在其中设置 isEditable = ''。