How to enable button using reactive forms in angular 2?

Question

I have a input field and a button.When the field is not empty the button should be enabled.But here in my case i am already passing input value.so it should be enabled but this is not happening.It is being enabled when i type anything in the input field.Any info on how to achieve it.below is my code

export class SignupFormComponent implements OnInit {
  userForm: FormGroup;
  submitted: boolean;
  hello = "hello world";

  ngOnInit() {
    this.userForm = new FormGroup({
      firstName: new FormControl('',[<any>Validators.required, <any>Validators.minLength(5)])
    });
  }

  onSubmit({ value, valid }: { value: userForm, valid: boolean }) {
    this.submitted = true;
    console.log(value,valid);
  }
}

here is my html code

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)" validate>
  <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" formControlName="firstName" [value]="hello">
  </div>
  <button type="submit"  class="btn btn-primary" [disabled]="userForm.invalid">Submit </button>
</form>

Whats that validate attribute doing on the form element? And if Im understanding you correctly, you want the button to be enabled whenever the forms input is filled in. So you are looking for the 'dirty' property of the form, correct? — Angular Dev
– Angular Dev, Commented Sep 19, 2017 at 12:40
yeah..as u can see i am getting input value from the component.So its already filled and the button should be enabled. — VENKATTHERAISINGSTAR
– VENKATTHERAISINGSTAR, Commented Sep 19, 2017 at 12:44

Sonicd300 · Accepted Answer · 2017-09-19 12:36:44Z

3

Remove the [value]="hello" from your input as they should go in the new FormControl(value, [validators], [asyncValidators]) for reactive forms.

something like:

ngOnInit() {
  this.userForm = new FormGroup({
    firstName: new FormControl(this.hello, [<any>Validators.required, <any>Validators.minLength(5)])
  });
}

answered Sep 19, 2017 at 12:36

Sonicd300

2,0591 gold badge18 silver badges23 bronze badges

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

2 Comments

VENKATTHERAISINGSTAR Over a year ago

Yeah i have tried this method and it works.But is it not possible to achieve that in the way i gave it??

Sonicd300 Over a year ago

The problem with mixing that approach is the input renders with a value, but is not invoking any of the reactiveForms functions to propagate it up to the formGroup you're creating and using in your [disabled] statement. If it worked please mark it as accepted.

RazvanParautiu · Accepted Answer · 2017-09-21 08:20:33Z

The easy way is to use reactive forms, like this:

step1: import ReactiveForm, FormBuilder, Validators
step2: declare FormGroup object and inject form builder into constructor
step3: init your form group
step4: using the reactive form in the same way as you did but with some changes

Code:

export class SignupFormComponent implements OnInit {
  userForm: FormGroup;
  firstName: string;

  constructor(private _formBuilder:FormBuilder){}

  ngOnInit() {
    this.userForm = this._formBuilder.group({
      'firstName': ['',[Validators.required,Validators.minLength(5)]]
    });
  }

  onSubmit() {
    console.log(this.firstName);
  }
}

HTML:

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()" name="userForm">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" [(ngModel)]="firstName" class="form-control" formControlName="firstName">
        <p *ngIf="userForm.controls.firstName.invalid && (userForm.controls.firstName.dirty || userForm.controls.firstName.touched)"> Error message </p>
      </div>
      <button type="submit"  class="btn btn-primary" [disabled]="userForm.invalid">Submit </button>
    </form>

Collectives™ on Stack Overflow

How to enable button using reactive forms in angular 2?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related