How to disable a Dynamic forms in Angular2

Question

I have created a dynamic form based on data[fields] from JSON, but I need the form to be initially disabled, so that when we click on Edit then only form becomes editable.

Here is my code for form:

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

and in my component HTML which populates from above switch case :

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

James Fooks · Accepted Answer · 2017-12-26 12:17:54Z

1

Initially set the form to disabled.

component.ts

showForm?:boolean = false;

component.html

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

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

answered Dec 26, 2017 at 12:17

James Fooks

791 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Noman Yaqoob · Accepted Answer · 2017-12-27 09:55:51Z

You need to do something like this:

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

Vikramjit Roy · Accepted Answer · 2017-12-26 12:11:43Z

0

[disabled]="!isEditable" where initialize isEditable = 'disabled' this could be added in both the text and email input fields.

Also in your edit button you can add a callback for click where you can set isEditable = ''.

answered Dec 26, 2017 at 12:11

Vikramjit Roy

4841 gold badge5 silver badges8 bronze badges

Comments

Vijay · Accepted Answer · 2017-12-26 12:22:49Z

0

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

You can solve it with a Directive. A directive named Canbedisabled and a property "blocked", for example. Write a setter for blocked and set it to nativelement.disabled property.

refer: https://github.com/angular/angular/issues/11271

edited Dec 26, 2017 at 12:22

answered Dec 26, 2017 at 12:10

Vijay

1248 bronze badges

Collectives™ on Stack Overflow

How to disable a Dynamic forms in Angular2

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related