Form doesn't trigger validation if setting input value programatically

Question

I have a form like this in Angular2:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" id="name" formControlName="name" value="{{elementToEdit?.name}}">
  <button type="submit" [disabled]="!form.valid">Save</button>
</form>

And the component code looks like:

export class ElementEditComponent implements OnInit {
  form: FormGroup;
  elementToEdit: Element;

  constructor(fb: FormBuilder,
          private elementService: ElementService) {
          this.form = fb.group({
              "name": new FormControl("", Validators.required)
          });
  }

  ngOnInit() {
    this.route.params
    .switchMap((params: Params) => this.recipeService.getElement(+params['id']))
    .subscribe(element => this.elementToEdit = element);
  }
}

I am doing it this way because I have the same form for editing existing elements and to create new elements, to if in the ngOnInit I try to get the element from the service in case I am receiving an id in the parameters. If so, when I receive the element, I set it to elementToEdit.

This works fine so far and the input takes the value as soon as the element is received. The problem I have is that when that happens, the validation of the form doesn't get triggered, so the button appears disabled even when the input is not empty.

Does anyone knows how can I solve this so the validation of the form gets triggered when the input's value is changed?

can u create a plunker?

Aravind
– Aravind

2017-03-04 09:33:23 +00:00
Commented Mar 4, 2017 at 9:33 — Aravind
– Aravind, Commented Mar 4, 2017 at 9:33

jonrsharpe · Accepted Answer · 2017-03-04 09:34:34Z

2

With the reactive forms you don't bind the value into the template directly, that's what the formControlName is for. Instead you update the FormGroup instance and let Angular update the displayed value, validation status, etc.:

ngOnInit() {
  this.route.params
    .switchMap((params: Params) => this.recipeService.getElement(+params['id']))
    .subscribe(element => this.form.patchValue(element);
}

I'd recommend running through the docs: https://angular.io/docs/ts/latest/guide/reactive-forms.html

answered Mar 4, 2017 at 9:34

jonrsharpe

123k31 gold badges278 silver badges488 bronze badges

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

Collectives™ on Stack Overflow

Form doesn't trigger validation if setting input value programatically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related