My goal is to implement a specific functionality within the profile page form. Initially, the form fields should be disabled. Upon clicking the edit button, the form fields should become enabled. However, a problem arises when clicking the edit button again, as the form fields become disabled once more.
Thank you in advance for your assistance.
Form Code:-
<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>
<!-- Repeat for other form fields -->
<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>
<!-- Save and cancel buttons -->
</ion-list>
</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>
Edit button Code:-
<ion-buttons *ngIf="!toggle" end>
<button ion-button (click)="changeStatus()">
<h3> <ion-icon name="create"></ion-icon></h3>
</button>
</ion-buttons>
.ts file for the changeStatus method:-
export class ProfilePage {
newItem:number[]= [];
mobileLength:number[] =[];
public inactive:boolean = true;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
changeStatus(){
this.inactive = !(this.inactive);
}