How to make a disabled reactive form Editable in Angular2

Question

I am Using below code to create a form and make it readOnly, I am new to angular

createForm() {
        this.comapnyIdentificationForm = this.fb.group({
          businessName: ['', Validators.required ],
          adressPrimary: '',
          adressSecondary: '',
          city:'',
          state: '',
          zipCode: '',
          country: '',
          companyPhone: '',
          DUNS: ''
        });
         this.comapnyIdentificationForm.disable();
      }

I need to make it enabled and post edited data back to Json :

<button type="button"  (click)="EditData()" class="btn modal-btn btn-default">Edit</button>

You really need to post more data then this. How you make it readonly for example — Swoox, Dec 22 '17 at 08:00

Sandip Jaiswal · Accepted Answer · 2017-12-22T08:47:48.700

1

Just use following code to enable your form .

this.comapnyIdentificationForm.enable();

To get a json object. Use following code:

this.comapnyIdentificationForm.value;

To fill-up your form with backend data use following code: this.comapnyIdentificationForm.patchValue(jsonData);

edited Dec 22 '17 at 08:47

answered Dec 22 '17 at 08:07

Sandip Jaiswal

3,428
2
13
15

I get data from JSON for different fields and if someone wants edit then need to send it back updated – iymrahul Dec 22 '17 at 08:20
1

Do you want to update your form with json data? Can you please properly describe so that I can help you better – Sandip Jaiswal Dec 22 '17 at 08:23
On my tab 1st the data comes from backend json, and then i have a button for Edit this data , which enables the filed to be edited , and then if changes are made then need to resubmit the form data back to Backend json (post) – iymrahul Dec 22 '17 at 08:28
I update my answer for your use case. If still you need help then let me know. – Sandip Jaiswal Dec 22 '17 at 08:48

score 1 · Answer 2 · answered Dec 22 '17 at 08:26

You can use a directive too

@Directive({
  selector: '[enableControl]'
})
export class EnableControlDirective {
  @Input() set enableControl( condition : boolean ) {
    if (condition)
        this.ngControl.control.enable();
    else
      this.ngControl.control.disable();
  }

  constructor(private ngControl : NgControl ) {}
}

//use
<input class="form-control " [enableControl]="condition">

How to make a disabled reactive form Editable in Angular2

2 Answers2

Linked