angular2 custom directives inputs syntax

Issue I create a custom directive and set the selector value to be “[unless-directive]“. The directive get a Boolean and use it to change the view as so: import {Directive, TemplateRef, ViewContainerRef} from ‘angular2/core’; @Directive({ selector: ‘[unless-directive]’, inputs: [‘givenBoolean :

Continue reading

Angular 2 RC2 New Forms

Issue As suggested in article: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub that in order to use new forms in RC2 we need to disable deprecated forms using below code: import {disableDeprecatedForms, provideForms} from ‘@angular/forms’; bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ]) Which apparently means that we now

Continue reading

Angular2 – Form implemented in another form – How to get values

Issue I have 2 forms. One parent form, and one children form. It looks like this: <form [formGroup]=”form” (submit)=”makeSomething()”> <input type=”text” formControlName=”test” /> <some-form-component></some-form-component> <input type=”submit” /> </form> For some-form-component I use file like this: <form [formGroup]=”form”> <input type=”text” formControlName=”somechildfield”

Continue reading

How to use Angular2 CheckboxControlValueAccessor?

Issue Can anyone help me to implement CheckboxControlValueAccessor in Angular2? Can anyone share some example to use CheckboxControlValueAccessor? I have a JSON that retrieve from an API i.e. {“prefer”:[{“name”:”Send me Offers and Letters”,”preferenceId”:”OffersAndLetter”,”selected”:”Y”},{“name”:”Need monthly reports”,”preferenceId”:”monthlyReports”,”selected”:”N”}],”comments”:null,”status”:”SUCCESS”,”errorDetails”:[]} Now i need to create

Continue reading

How do I validate a form where the data comes from 2 inputs?

Issue Case in question: Date and time. My form has 2 separate input fields, date (opens a date picker) and timeOfDay (opens a clock picker), <div class=”form-group date-and-time”> <div class=”my-datepicker md-form-control”> <md-input readOnly type=”text” placeholder=”Date” myDatePicker formControlName=”date”> </md-input> <small *ngIf=”!form.controls.date.valid

Continue reading

Angular 2 RC6 Forms control validation message

Issue <form [formGroup]=”registerForm” (submit)=”onSubmit()”> <label>Firstname:</label> <input type=”text” formControlName=”firstname”> <p *ngIf=”registerForm.controls.firstname.errors”>This field is required!</p> … Is there any way to make registerForm.controls.firstname.errors little bit shorter? Solution One way is to define the shorter names as AbstractControl properties in your Form Component.

Continue reading

Using a plain POST form within an Angular 2 template results in: "Template parse errors: No provider for ControlContainer"

Issue I would like to have a plain html form (that does a POST without relying on javascript) within a angular 2 template. Having the following plain POST form: <form action=”connect/facebook” method=”POST”> <input type=”hidden” name=”scope” value=”public_profile,email”/> <button type=”submit”>Connect to FB</button>

Continue reading

Angular2 – reference element state

Issue I have this Component @Component({ selector: ‘registration-form’, template: ` <label for=”email” class=”name”>Email</label> <input #email id=”email” class=”input” ngControl=”email”> <tooltip [visible]=”if-email-input-above-is-focused”></tooltip> `, directives: [ TooltipComponent ] }) export class RegistrationForm { } and I want to show the tooltip component only

Continue reading

How do i debounce form in angular2

Issue I went through lots of post, but did not find what I was looking for. Basically, I am showing user validation on form changes. My template looks like this: <div class=”form-group” [class.error]=”!loginForm.find(’email’).valid && loginForm.find(’email’).touched”> <div class=”input-wrapper”> <input type =”email”

Continue reading

Set Default Form Values from API Call

Issue I get the following error when I try to initiate form control values in my ngOnInit method: Error formGroup expects a FormGroup instance. Please pass one in. Method ngOnInit() { this.getBusinessData().then((response:any) => { this.businessForm = this.formBuilder.group({ ‘business_name’: [response.data.business_name, Validators.required],

Continue reading

Angular 2 final – Passing Filter Data from Filter.Component to App.component

Issue I have created a simple filtering app that works, when I have the filtering and the listing in the same component (app.ts): http://plnkr.co/0eEIJg5uzL6KsI70wWsC @Component({ selector: ‘my-app’, template: ` <select name=”selectmake” [(ngModel)]=”makeListFilter” (ngModelChange)=”selectMake()”> <option *ngFor=”let muscleCar of muscleCars” [ngValue]=”muscleCar”>{{muscleCar.name}}</option> </select>

Continue reading

Use disable with model-driven form

Issue I’m trying to use the disabled inside my model-driven form. I have the following form: this.form = this.formBuilder.group({ val1: [”, Validators.required], val2: [{value:”, disabled:this.form.controls.val1.valid}] }); I’m getting an error (not finding controls of this.form) probably because I’m using this.form

Continue reading

Run Method on FormControl's valueChanges Event

Issue I have the following code for an Angular 2 type-ahead component: this.question[“input”] = new FormControl(); this.question[“input”].valueChanges .debounceTime(400) .switchMap(term => this.question[‘callback’](term)) .subscribe( data => { this.question[“options”].length = 0; this.question[“options”].push(…data); } ); Which is working great, however I am Attempting to

Continue reading

Angular 2 set selected property

Issue I am trying to set selected option in Angular2. I have a select. <select class=”form-control” id=”country” [(ngModel)]=”facility.country” formControlName=”countryField” (ngModelChange)=”countrySelected($event)” > <option id=”countryOption{{c.id}}” *ngFor=”let c of rawCountries” [ngValue]=”c”>{{c.message}}</option> </select> And on select method. countrySelected(): void { this.facility.country = this.rawCountries.find(rawCountries =>

Continue reading

How to style Input with optional value

Issue I have an input field with optional value (not required). When I interact with it, I get classes ng-dirty, ng-valid, ng-touched <input type=”text” formControlName=”url” [class.has-value]=”quickSetupForm.controls.url.value !== ”” placeholder=”www.example.com” id=”url”> input.ng-valid.ng-dirty.has-value border-bottom 2px solid green What’s the best way to

Continue reading

Adding tooltip to icon button

Issue I am attempting to add an md tooltip to an md-icon button as follows: <div layout = ‘row’ layout-align = ‘center center’> <button md-icon-button color = ‘primary’ (click) = ‘resetInputForm()’> <md-icon class = ‘md-24′>cached</md-icon> md-tooltip=’Reset’ tooltip-position=’above’ </button> </div> However,

Continue reading

Angular2 reactive form default input value

Issue I’ve got following code that initialize form in my component: let editMode: boolean = !!this.template.templateId; this.editTemplateForm = this.formBuilder.group({ templateId: {value: editMode ? this.template.templateId : ”, validators: [Validators.required, this.templateIdValidator]}, dataStorageTime: {value: editMode ? this.template.dataStorageTime : this.globalParameter.dataStorageTime, Validators.required, Validators.pattern(“[0-9]+”)]}); Value of

Continue reading

HTTP post working on postman but not on Angular 2

Issue I have a template which (click) triggets addUseCase(): import {Component} from “@angular/core”; import {DataService} from “../shared/data.service”; import {Config} from “../shared/strings”; import {Headers, Http} from “@angular/http”; @Component({ selector: “add”, styleUrls: [“add.component.scss”], templateUrl: “add.component.html” }) export class AddComponent { public title:

Continue reading

Model driven forms – Validators issue

Issue I am testing a simple app. These are my files: home.component.ts import { Component } from ‘@angular/core’; import { FormGroup, FormControl, Validators, FormBuilder } from ‘@angular/forms’; @Component({ selector: ‘app-home’, templateUrl: ‘home.component.html’ }) export class HomeComponent { form: FormGroup; constructor(fb:

Continue reading

angular2 dynamic validate message doesn't work after upgrade to final

Issue I custom to dynamic validate message for form in Angular2.RC4 (validate form without defining error messages at each input) ChangePass.ts @Component({ selector: ‘[change-password]’, template: `<form [ngFormModel]=”passwordForm” id=”passwordForm” (ngSubmit)=”changePassword()”> <div class=”row”> <div class=”input-field col s12″> <input type=”password” class=”form-control” id=”oldPassword” ngControl=”oldPassword”

Continue reading

Validate password and confirm password Ng2

Issue Here are my codes: <form [formGroup]=”registerForm” novalidate (ngSubmit)=”doRegister()”> <div class=”form-group” [ngClass]=”{‘has-danger’: registerForm.controls.email.invalid && !registerForm.controls.email.pristine}”> <label>Email</label> <input formControlName=”email” name=”email” [ngClass]=”{‘form-control-danger’: registerForm.controls.email.invalid && !registerForm.controls.email.pristine}” class=”form-control” type=”email” /> </div> <div class=”form-group” [ngClass]=”{‘has-danger’: registerForm.controls.password.invalid && !registerForm.controls.password.pristine}”> <label>Password</label> <input class=”form-control” type=”password” formControlName=”password” name=”password” [ngClass]=”{‘form-control-danger’:

Continue reading

Programmatcally set value of formControl in Model Driven Form

Issue How do I get my bottom line of the below function to set the value of the categories form field? ngOnInit() { this.findForm = this.formBuilder.group({ categories: [”, [<any>Validators.required]], distanceNumber: [”, [<any>Validators.required]], distanceUnit: [‘kilometers’, [<any>Validators.required]], keywords: [‘lemon’, [<any>Validators.required]], }); this.findForm.controls[‘categories’].updateValueAndValidity(“shoe”);

Continue reading

Model driven form – pristine is always true

Issue How can I programmatically set pristine to false? this.myForm.get(‘categories’).set…..set what? There is no setPristine. For some reason when I set the categories like this: this.myForm.get(‘categories’).setValue( this.multiselectFindCategory.selectedCategories ); this.myForm.controls.categories.pristine is still equal to true. Solution this.myForm.get(‘categories’).markAsDirty(); Answered By – BeniaminoBaggins

Continue reading

angular2 instantiate a service

Issue I call a service from my component like this: import { MissionService } from ‘./modal.service’; I inject it in the constructor: model: any = {}; constructor(private modalService: NgbModal, private missionService: MissionService) {} open(content) { this.model = this.missionService.getCompany(); … }

Continue reading