如何在单击编辑按钮后启用角度4中的表单域？

我希望具有以下功能： - 首先应禁用配置文件页面表单 . 然后单击编辑按钮，应启用表单域 . 但是，问题是当我再次单击编辑按钮时，表单字段将被禁用 .

提前致谢 .

表格代码： -

<form name="profile" style="border: none">
      <!-- <fieldset display="none" disabled="disabled" > -->

   <div>
      <ion-list>

 <ion-item>
    <ion-input type="text" placeholder="First Name" class="item" [disabled]="inactive"></ion-input>
    <ion-icon name="person" item-left></ion-icon>
  </ion-item>

 <ion-item>
    <ion-input type="text" placeholder="Last Name" class="item" [disabled]="inactive"></ion-input>
    <ion-icon name="person" item-left></ion-icon>
  </ion-item>

 <!-- <ion-item>
    <ion-input type="text" placeholder="Phone" style="font-size: 20px;" style="color: #000;"></ion-input>
    <ion-icon name="call" item-left></ion-icon>
  </ion-item> -->
  <ion-item >

      <!-- <ion-label class="textsize" >mobile:</ion-label> -->
       <ion-input type="number" placeholder="Phone" style="font-size: 20px;" style="color: #000;" [disabled]="inactive"></ion-input>
       <ion-icon name="call" item-left></ion-icon>
       <button ion-button item-end (click)="addField()" [disabled]="inactive">+</button>
         <!--<ion-label>{{mobileLength.length}}</ion-label>-->
         <!--<ion-label>{{newItem.length}}</ion-label>-->

    </ion-item>

 <div *ngIf="mobileLength.length > 0" >
         <!--<ion-label>{{mobileLength.length}}</ion-label>-->
         <ion-item *ngFor="let item of newItem; let i = index;">
         <!-- <ion-label type="num" class="textsize" >mobile:</ion-label> -->
         <ion-input type="number" placeholder="Phone" style="font-size: 20px;" style="color: #000;" [disabled]="inactive"></ion-input>
         <ion-icon name="call" item-left></ion-icon>
         <button ion-button item-end (click)="removeField(i);">-</button>
     </ion-item>
     </div>

 <ion-item>
    <ion-input type="email" placeholder="Email"style="font-size: 20px;" style="color: #000;" [disabled]="inactive"></ion-input>
    <ion-icon name="mail" item-left></ion-icon>
  </ion-item>

 <ion-item>
    <ion-input type="text" placeholder="Designation" class="item" [disabled]="inactive"></ion-input>
    <ion-icon name="school" item-left></ion-icon>
  </ion-item>

 <ion-item>
    <ion-input type="text" placeholder="Company Name" class="item" [disabled]="inactive"></ion-input>
    <ion-icon name="briefcase" item-left></ion-icon>
  </ion-item>

 <ion-item>
    <ion-input type="text" placeholder="Address Line" style="font-size: 20px;" style="color: #000;" [disabled]="inactive"></ion-input>
    <ion-icon name="pin" item-left></ion-icon>
  </ion-item>
  <!-- <button ion-button>Default</button>
<button ion-button color="light">Light</button> -->

  <ion-row>
     <ion-col width-50 style="text-align: right">
       <button class="savebutton" ion-button [disabled]="inactive">SAVE</button>
         </ion-col>
        <ion-col width-50 style="text-align: left">
       <button class="cancelbutton" ion-button color="light" [disabled]="inactive">CANCEL</button>
     </ion-col>
   </ion-row>


</ion-list>
<!-- <button ion-button block>Save</button>
<button ion-button color="dark" full>Cancel</button> -->
<!-- <input type="submit" value="Modifier" name="btn" style="display:inline" />
 <input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" /> -->

</div>

</form>
  </ion-content> type="submit" value="Modifier" name="btn" style="display:inline" />
 <input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" /> -->

</div>

</form>
  </ion-content>

编辑按钮代码： -

<ion-buttons *ngIf="!toggle" end>

         <button ion-button (click)="changeStatus()">
               <h3> <ion-icon  name="create"></ion-icon></h3>
          </button>
        </ion-buttons>

.ts文件的changeStatus方法： -

export class ProfilePage {
 newItem:number[]= [];
mobileLength:number[] =[];
public inactive:boolean = true;


 constructor(public navCtrl: NavController, public navParams: NavParams) {

 }

 changeStatus(){
    this.inactive = !(this.inactive);
  }