Angular 7: Disable and Enable particular form field in angular 7 reactive form

Question

I know questions like this has been asked before but unfortunately those didn't work out for me. So I am working in angular 7 I created a reactive form field that contain firstname, lastname and some other details and every field is disabled by default and also have their own edit button.

So what I want is to enable and disable the particular field for which I click the edit button rest other fields should remain disabled.

May be I should create my own custom directive but that's really confusing for me.

So is there any easy way to achieve this? or if custom directive is the only easy way to achieve this then please help out with some link or code to do this.

Right now I created a variable of boolean type and by using this variable I enable and disable it, but problem with this approach is I have to created separate variable for each field in order to avoid confusion but I don't think that is count under the best approach. I shared my code for better understanding.

component.ts

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

export class ProfileComponent implements OnInit {

profileForm: FormGroup;
userData: User
isDisable :boolean = true
  constructor() { }

  ngOnInit() {

    this.userData = JSON.parse(localStorage.getItem("user data"));

    this.profileForm = new FormGroup({
      'firstname': new FormControl({value: this.userData.firstname, disabled: this.isDisable}, Validators.required),
      'lastname': new FormControl({value: this.userData.lastname, disabled: this.isDisable}, Validators.required)
    })
  }

  onEdit(value:string) {
    this.isDisable=!this.isDisable
    console.log(this.isDisable);

    if(!this.isDisable) {
      this.profileForm.controls[value].enable()
    }
    if(this.isDisable) {
      this.profileForm.controls[value].disable()
    }
  }

  onSubmit() {
    console.log(this.profileForm.value)
  }

}

component.html

<div class="col-12">
  <div class="form-section">
    <form
    class="login-form"
    [formGroup]="profileForm"
    (ngSubmit)="onSubmit()">
      <div class="row mb-4 no-gutters">
          <div class="col-4 property">
              First Name:
            </div>
            <div class="col-7 value">
              <div class="form-group m-0">
                <input 
                type="text" 
                class="form-control" 
                name="firstname"
                formControlName="firstname" 
                id="">
              </div>
            </div>
            <div class="col-1 value">
              <button 
              type="button"
              class="btn btn-primary"
              (click)="onEdit('firstname')">
                  edit
              </button>
            </div>
      </div>
      <div class="row mb-4 no-gutters">
          <div class="col-4 property">
              Last Name:
            </div>
            <div class="col-7 value">
              <div class="form-group m-0">
                <input 
                type="text" 
                class="form-control" 
                name="lastname"
                formControlName="lastname" 
                id="">
              </div>
            </div>
            <div class="col-1 value">
              <button 
              type="button"
              class="btn btn-primary"
              (click)="onEdit('lastname')">
                  edit
              </button>
            </div>
      </div>
      <button 
      class="btn btn-primary mt-4"
      [disabled]="!profileForm.dirty"
      type="submit">Submmit</button>
    </form>
  </div>
</div>

Kamran Khatti · Accepted Answer · 2020-09-20 08:54:09Z

1

All you could do instead of passing control name in onEdit('firstname') method you can pass control itself and check if its disabled then enable it and vice versa.

in template

(click)="onEdit(profileForm.get('firstname'))" <== pass control itself

in component

onEdit(control: AbstractControl) {
  control.status === 'DISABLED' ? control.enable() : control.disable();
}

answered Sep 20, 2020 at 8:54

Kamran Khatti

4,2071 gold badge23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ayush Verma Over a year ago

It worked but when I made any changes and again disable the field my submit button also gets disabled, or even if I don't disable the field after making any changes and submit the form field it only console the value of the field which is update and not the other, can you help me with this ?

Kamran Khatti Over a year ago

@AyushVerma when you want to disable and enable button means on what criteria button should enable disable?

Kamran Khatti Over a year ago

@AyushVerma technically submit button should only disable when form is invalid, what you did [disabled]="!profileForm.dirty" means only disable when form fields not touched or modified which is not a good approach. Try [disabled]="profileForm.invalid"

Ayush Verma Over a year ago

I can work with that but can you please tell me how to console all the form value even if it is not changed.

Kamran Khatti Over a year ago

@AyushVerma inside your submit method you can console.log(this.profileForm.value) to print all form values.

|

Collectives™ on Stack Overflow

Angular 7: Disable and Enable particular form field in angular 7 reactive form

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related