Angular 5 FormBuilder errors undefined when invalid input

Question

[As a Newbie tried to put this into plnkr, but couldn't; problems getting @angular/forms added to json.]

Purpose: to iron out things I need to know to do all my work in FormBuilder HTML:

  <input type="text"
         formControlName="bucket"
         value="A"
         [(ngModel)]="AllData.bucket" />

  // added to button  to test: [disabled]="this.myTestForm.invalid || this.myTestForm.pristine"
  <div><button
               type="submit">submit</button></div>
</form>

<div *ngIf="result.length > 0 ">{{result}}</div>
<div *ngIf="myTestForm.errors === true ">ERRORS FOUND</div>

Running the app: shows the formbuilder in the ts below initializes the input field correctly and if I add the [disabled] expression commented above it disables button correctly.

Here's the ts: import {Component, OnInit} from '@angular/core'; import {Validators, FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  myTestForm: FormGroup;
  result: string;
  AllData = {    //// wired to ngModel
    bucket: '12'
  }

  constructor(private fb: FormBuilder) {
    this.result = '';
  }

  ngOnInit() {
    this.myTestForm = this.fb.group({
      bucket: ['starting value', [Validators.required, Validators.minLength(5)]]  
<-- ngModel bucket above overrides this init value as expected -->

    });
  }

  onSubmit(value: any) { // ways to show results
    this.result = this.AllData.bucket;
    // OR //
    this.result = this.myTestForm.controls['bucket'].value;
    // OR //
    this.result = this.myTestForm.get('bucket').value;
  }
}

The app inits with '12' in the input field as expected. No matter what I put into the textbox before pressing the submit button, devTools always shows the myTestForm 'error' property as undefined.

I'm expected errors to have some sort of string(s) based on the type of error(s) that is occurring.

Further, I scoured the web for ways to capture invalid fields as soon as the error occurs (of course for !pristine fields), but I couldn't get anything to work.

Any help will be much appreciated.

Thanks in advance, Chuck

For what do you want use the ngModel? Use the value of the reactive form only. — Daniel Caldera
– Daniel Caldera, Commented Jul 4, 2018 at 18:48

Amit Chigadani · Accepted Answer · 2018-07-04 19:31:00Z

3

I have created a small demo to provide a suggestion on your approach

Do not use [(ngModel)] when your are using reactive forms approach, as ngModel will take precedence over the formControl and set its value to the control irrespective of formcontrol's value, that you have initialized.

<form [formGroup]="myTestForm" >
<input type="text"
     formControlName="bucket"
     value="A" />
<div><button 
           [disabled]="myTestForm.invalid || myTestForm.pristine"
           type="submit" >submit</button></div>
</form>

To check form errors, use hasError() on controls

<div *ngIf="myTestForm.get('bucket').hasError('required')">Input is required</div>

<div *ngIf="myTestForm.get('bucket').hasError('minlength')">Min length should be 5</div>

answered Jul 4, 2018 at 19:31

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

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

2 Comments

Yogi Bear Over a year ago

Wow... I get it. The reason for the ngModel was simply ONE way to set/get the values. I didn't realize that it interfered with formControl. (Obviously, I don't NEED ngModel).

Yogi Bear Over a year ago

You answer is just what I needed. Thanks so much. Chuck (Yogi)

Collectives™ on Stack Overflow

Angular 5 FormBuilder errors undefined when invalid input

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