very basic angular2 form not getting validated

Question

I have a very basic form consisting of a input field and a button. I am trying to use angular2 validators to show an error message when anything other than numbers are entered into the input field and also to disable the submit button when the input field is invalid or empty. For some reason the error message shows regardless of what gets entered... Any idea what i'm doing wrong?

my code:

app.component.html:

<div class="row">
<div class="col-md-4 col-md-push-4">
<form [formGroup]="barcodeForm"  role="form" (ngSubmit)="submitBarcode(barcode)" >
    <div class="form-group">        
        <input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" [formControl]="barcodeForm.controls['barcode']" [(ngModel)]="barcode" name="barcode" #focusInput>
        <div [hidden]="barcode.valid || barcode.pristine" class="alert alert-danger">A barcode can only consist of numbers (0-9)...</div>
    </div>
    <button class="btn btn-submit btn-block" [disabled]="!(barcode.valid) || barcode.pristine">Submit</button>
</form>

</div>
</div>

part of app.component.ts:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RestService } from "./services/rest.service";
import { ProductModel } from "./models/product.model";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('focusInput') focusInput: ElementRef;
barcode: string;
barcodeForm: FormGroup;
product: ProductModel;

    constructor(fb: FormBuilder, private restService: RestService){
        this.barcodeForm = fb.group({
            'barcode':['', [Validators.required, Validators.pattern("[0-9]+")]]
        });

    }

Amit · Accepted Answer · 2016-12-12 13:13:43Z

1

In angular2 there are two types of forms: template driven and model driven.

Model driven is defining the form's structure in code and binding inputs to its controls (via formControl and formGroup). And template driven is using ngModel and defining validators on the template.

I can see most of your code is targeted for model driven which in my opinion is better anyway, but you still have ngModel on your input, do you need it for something? I dont see you using it anywhere other than barcode.valid which shouldn't work since barcode is merely a string. You want to bind the disabled property to barcodeForms.controls['barcode'].valid instead and then remove the use of ngModel. It might conflict with formControl since both of them initialize a FormControl instance for that element.

answered Dec 12, 2016 at 13:13

Amit

4,35323 silver badges25 bronze badges

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

3 Comments

user2094257 Over a year ago

How could I get the barcode field's value without the ngModel? I don't have a barcode model as it's just a barcode:string...

Amit Over a year ago

Use the following: (ngSubmit)="submitBarcode(barcodeForm.value.barcode)"

user2094257 Over a year ago

Thanks a lot @Amit Dahan

Collectives™ on Stack Overflow

very basic angular2 form not getting validated

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related