angular2-forms

How to add form validation pattern in Angular 2?

by

Now, you don’t need to use FormBuilder and all this complicated valiation angular stuff. I put more details from this (Angular 2.0.8 – 3march2016): https://github.com/angular/angular/commit/38cb526 Example from repo : <input [ngControl]=”fullName” pattern=”[a-zA-Z ]*”> I test it and it works 🙂 – here is my code: <form (ngSubmit)=”onSubmit(room)” #roomForm=’ngForm’ > … <input id=’room-capacity’ type=”text” class=”form-control” [(ngModel)]=’room.capacity’ … Read more

Angular2 Error: There is no directive with “exportAs” set to “ngForm”

by

Since 2.0.0.rc6: forms: deprecated provideForms() and disableDeprecatedForms() functions have been removed. Please import the FormsModule or the ReactiveFormsModule from @angular/forms instead. In short: If you use template-driven forms, add FormsModule to your @NgModule. If you use model-driven forms, add ReactiveFormsModule to your @NgModule. So, add to your app.module.ts or equivalent: import { NgModule } from … Read more

Generic email validator

by

You can do only using html: <md-input-container class=”md-icon-float md-block” flex-gt-sm> <label>Email</label> <input md-input id=”contact-email” type=”text” ngControl=”email” #email=”ngForm” [(ngModel)]=”contact.email” required pattern=”^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$”> <div class=”md-errors-spacer” [hidden]=”email.valid || email.untouched”> <div class=”md-char-counter” *ngIf=”email.errors && email.errors.required”> Email is required </div> <div class=”md-char-counter” *ngIf=”email.errors && email.errors.pattern”> Email is invalid </div> </div> </md-input-container>

Resetting a form in Angular 2 after submit

by

>= RC.6 Support resetting forms and maintain a submitted state. console.log(this.form.submitted); this.form.reset() or this.form = new FormGroup()…; importat update To set the Form controls to a state when the form is created, like validators, some additional measurements are necessary In the view part of the form (html) add an *ngIf to show or hide the … Read more

Angular2 – Validate and submit form from outside

by

You can link the button to the form using the form attribute on the button: <form (ngSubmit)=”save()” id=”ngForm” #documentEditForm=”ngForm”> … </form> <button form=”ngForm”> SAVE </button> You can still check its validity like this: <button form=”ngForm” [disabled]=”!documentEditForm.form.valid”> SAVE </button> The form needs to have an ID id=”example-form” and the submit button a matching ID in the … Read more

Angular 2 Form “Cannot find control with path”

by

There should be a formControlName in your HTML form mapped to your component file. <div *ngFor=”let list_item of [0,1,2]; let i=index” class=”panel panel-default”> {{i + 1}}.) <input type=”text” formControlName=”{{i}}” placeholder=”List Item” class=”form-control”> </div> list_items: this.fb.array([ [”], //0 points to this [”], //1 points to this [”] //2 points to this ])

Property ‘controls’ does not exist on type ‘AbstractControl’ Angular 4 [duplicate]

by

Based on @GĂĽnter Zöchbauer comments , first i changed myForm.controls[‘addresses’] to myForm.get(‘addresses’) in both html and typescript and then based on @yuruzi comment changed myForm.get(‘addresses’).controls to myForm.get(‘addresses’)[‘controls’] Its working fine now. Thanks @gunter & yuruzi

How to convert input value to uppercase in angular 2 (value passing to ngControl)

by

As @Eric Martinez suggested, you can create a local template variable, and bind the uppercase string to the value property on the input event: <input type=”text” #input (input)=”input.value=$event.target.value.toUpperCase()” /> Alternatively, you can make this a directive: @Directive({ selector: ‘input[type=text]’, host: { ‘(input)’: ‘ref.nativeElement.value=$event.target.value.toUpperCase()’, } }) export class UpperCaseText { constructor(private ref: ElementRef) { } } … Read more

Angular 2: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

by

Figured out quick solution, update your @NgModule code like this : import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { FormsModule } from ‘@angular/forms’; import { AppComponent } from ‘./app.component’; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } … Read more