如何制作一个禁用的反应形式在Angular2中可编辑

时间:2017-12-22 07:43:17

标签: javascript angular angular2-forms

我正在使用下面的代码创建一个表单并使其成为readOnly,我是angular

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

我需要启用它并将编辑后的数据发布回Json:

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

2 个答案:

答案 0 :(得分:1)

只需使用以下代码即可启用表单。

this.comapnyIdentificationForm.enable();

获取json对象。使用以下代码:

this.comapnyIdentificationForm.value;

要使用后端数据填写表单,请使用以下代码: this.comapnyIdentificationForm.patchValue(jsonData);

答案 1 :(得分:0)

您也可以使用指令

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