'Conditional reset method "if disable ignore not disable reset" angular

<div>

     <div>
    <label>Name</label>
    <input type="text" [(ngModel)]="name" [disabled]="editData"
     </div>
  <div>
  <label>address</label>
  <input type="text" [(ngModel)]="address" 
  </div>
</div>

<button (click)=add() >add</button>
<button (click)=edit()>edit</button>
<button (click)=reset()>reset</button>

Note:- On add() both fields should be reset but on edit only address field should be reset by without disturbing previous value in it (ignore disabled field)

ts file

reset(){ this.name=""; this.address="";

}

by doing this all fields are getting reset



Solution 1:[1]

reset(): void{ 
   if(!this.editData) {
     this.name = "";
   }else{
   this.address = this.formvalue.address;
}
}

Solution 2:[2]

In your .ts file, only reset the address field not the name.

reset(): void{ 
   this.address = "";
}

If you want to reset only the address field, when name field is disabled you can do something like this:

reset(): void{ 
   if(!this.editData) {
     this.name = "";
   }
   this.address = "";
}

Solution 3:[3]

.ts file

  add() {
    this.name = '';
    this.address = '';
  }
  edit() {
    this.name = this.name;
    this.address = '';
  }
  reset() {
    if (!this.editData) {
      this.name = '';
    }
    this.address = '';
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rkamlekar
Solution 2 HassanMoin
Solution 3 Vijaya Lakshmi