Disable a text input in an angular 2 reactive form

Question

I have a reactive form in angular 2 which can get called through an add button for a new form or an edit button to update existing details. If the user selects the edit button the email input should be disabled. I have the code below but whenever the user selects edit, the input is not disabled. If i set disabled to be true in the addForm method and select the edit button then the email input is disabled

    public addForm(event: string) : FormGroup {

            this.userForm = this.fb.group({
                firstName: ['',
                    [   Validators.required,
                        Validators.maxLength(ManageUsersConstants.maxLengthName)
                    ]],
                lastName: ['',
                    [   Validators.required,
                        Validators.maxLength(ManageUsersConstants.maxLengthName)]
                    ],
                email: [{value: '', disabled : false}],
                }),
            });
        }
  

    public editForm(event: string, editValues : any) : FormGroup {
        this.userForm = this.fb.group({
            firstName: [editValues.firstName, [
                Validators.required,
                Validators.maxLength(ManageUsersConstants.maxLengthName)]],
            lastName: [editValues.lastName,
                [   Validators.required,
                    Validators.maxLength(ManageUsersConstants.maxLengthName)]],
            email: [{value: editValues.email, disabled: true}],
        });

    }

It looks like you're just reassigning the form. Why not directly target the input and change that instead? this.userForm.get('email').disable(); (I think, haven't touched one in a little bit 😅) — MichaelSolati
– MichaelSolati, Commented May 31, 2018 at 15:23
I mean targeting email from the FormGroup (like the code bit from my last comment) — MichaelSolati
– MichaelSolati, Commented May 31, 2018 at 15:27
i tried that and also set/patch but it still seems to set it to false — BrianM
– BrianM, Commented May 31, 2018 at 15:31

Abel Valdez · Accepted Answer · 2018-05-31 16:03:08Z

4

In edit event add the following code this.formGroup.controls['email'].disable() ;

Component.ts

 ngOnInit() {
    this.formGroup = this.formBuilder.group({
      email: [{value: '', disabled : false}]      
    });  
  }  

  onEdit(){    
    this.formGroup.controls['email'].disable()   
  }

HTML

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" #form>
    <div>
      <label for="dateone">Email: </label>
      <input formControlName="email" #email/>          
      <button type="button" (click)="onEdit()">edit</button>  
      </div>
</form>

Stackblitz demo

answered May 31, 2018 at 16:03

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

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

2 Comments

BrianM Over a year ago

Quick question, i added that line of code into edit and it works, but whenever i then click on add again the input is disabled. I added this line of code in - this.userForm.controls['email'].enable(); - after the form is created but it is still disabled. I get an undefined if i add it in before the form is created

BrianM Over a year ago

Got it working, just added a check to make sure it was not undefined, and moved it to before the form is created

Collectives™ on Stack Overflow

Disable a text input in an angular 2 reactive form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related