Question

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

提前致谢。

表格代码： -

    <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);
  }

Answer 1

您唯一需要做的就是设置一次非活动属性。见下文：

changeStatus(){
   this.inactive = false;
}

您否定当前的非活动属性并在true和false之间切换。这就是它切换

的原因

Answer 2

您可以更改：

changeStatus() {
  this.inactive = false
}

或者您可以保持相同的功能，但如果单击则需要隐藏“编辑”按钮。

例如：如果单击“编辑”按钮，则显示“取消”按钮以再次禁用该表单。

<ion-buttons *ngIf="!toggle" end>
  <button ion-button (click)="changeStatus()" *ngIf="inactive">
    <h3><ion-icon  name="create"></ion-icon></h3>
  </button>
  <button ion-button (click)="changeStatus()" *ngIf="!inactive">
    <h3><ion-icon  name="close-circle"></ion-icon></h3>
  </button>
</ion-buttons>

希望这有帮助。

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

2 个答案: