如何在 Angular2 中禁用動態表單

Question

我已經基於來自 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 中，它從開關盒上方填充：

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

Answer 1

最初將表單設置為禁用。

組件.ts

showForm?:boolean = false;

組件.html

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

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

Answer 2

你需要做這樣的事情：

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

Answer 3

@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”。 為blocked 編寫一個setter 並將其設置為nativelement.disabled 屬性。

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

Answer 4

[disabled]="!isEditable" where initialize isEditable = 'disabled' 這可以添加到文本和電子郵件輸入字段中。

同樣在您的編輯按鈕中，您可以添加一個單擊回調，您可以在其中設置 isEditable = ''。