Issue I want to format data (provided by user )to my own format or change them on the fly (eg. set 0 when user put a value lower than 0 or something like that). I mostly use a reactive forms
Continue readingTag: angular2-forms
Angular2 No provider for Renderer! (NgModel -> Token NgValueAccessor -> DefaultValueAccessor -> Renderer)
Issue I custom modal of customModal.ts in shlomiassaf/angular2-modal. Specific, i add a input contain ngModel, it imported FORM_DIRECTIVES and directives. The issue when run ‘No provider for Renderer! (NgModel -> Token NgValueAccessor -> DefaultValueAccessor -> Renderer)’ Please help me resovle
Continue readingangular2 – communication between components
Issue I search about communication between components with Angular2, but what I need is a little bit different. I have a structure like this: Father –> Son –> Son My Code looks like this Father Component: @Component({ selector: ‘app’, templateUrl:
Continue readingAngular2 : No provider for String! (child -> String) in [Array in parent
Issue Im building basic Todo App in angular2 when I click add button to send data from parent to child using input I get No provider for string! (child->string), and no data displayed only button at the child class is
Continue readingangular2 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 readingForm Submit Error – Angular 2 Javascript
Issue Can anyone check this image link and explain me why this error is coming after form submit. I have submitted form using (submit) and navigated to next page by using this.router.navigate([‘/Todos’]);. Here is my code, login.html <form #simpleForm=”ngForm” (submit)=”onSubmit(simpleForm,
Continue readingAngular 2 Directive with ngModel and ngControl
Issue I want to write a Angular 2 Directive, which should have the following behavior: Must be usable with and without a wrapping <form [ngFormModel]=”form”> Should use [(ngModel)] for data binding Use an Observer internally, which updates the ngModel 250ms
Continue readingError _renderer.setElementStyle "Cannot set property 'background-color' of undefined in [null]"
Issue I’m studding angular2 at the udemy course for angular2, and the teacher wrote a directive that highlight a html element. I trying to do as fallow but the to me the _renderer.setElementStyle throws exception. EXCEPTION: TypeError: Cannot set property
Continue readingAngular 2 – Input mask: Input box display formatted value, while model retains unformatted value
Issue I’m trying to have an input field format/mask values as they are typed, while having the actual model retain the raw (or differently formatted) value. I’m thinking phone numbers etc, but for simplicity am using uppercase for testing. I’ve
Continue readingHow to migrate Angular 2 RC 1 (or earlier) Forms to Angular 2 RC 2 / RC 4 New Forms
Issue I need to migrate my existing Angular 2 RC 1 app to Angular 2 RC 4. As a part of which I also need to move my existing forms to Angular 2 RC 4 New Forms. Can anyone please
Continue readingHow to trim white spaces at beginning of input in ng-2 material <md-input> field
Issue I’m using ng-2 material with angular 2 rc1. I want to restrict the user to add spaces in <md-input></md-input> field. I have tried different methods to solve it. Lastly I added a directive to do this. Here’s my directive
Continue readingAngular 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 readingAngular 2: module with conditional dependency on `@angular/forms`
Issue I’m developing a simple Angular 2 reusable component – a captcha form field, using RC5. I don’t want the users of this module to have to serve @angular/forms if they’re not using it (cause the component is self-sufficient). Let’s
Continue reading@angular/forms Generic type 'Type<T>' requires 1 type argument(s)
Issue I upgraded Node and NPM and reinstalled Angular CLI(angular-cli: 1.0.0-beta.11-webpack.8, node: 6.5.0, os: linux x64), generated a foo project which worked fine. Then I bumped Angular 2 to RC.6 and got this error: jan@linux-zd16:~/src/fm-repos/foo> ng serve ERROR in [default]
Continue readingUpgrading to @angular/forms in RC6
Issue I’ve been postponing the upgrade from the deprecated forms api to the new forms api in @angular/forms. I just upgraded to RC6 and also want to start using @angular/forms now. Documentation is very scarce at this point, and im
Continue readingAngular2 – 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 readingHow 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 readingHow 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 readingAngular2 – Custom directives inside form misbehavior
Issue I’m having trouble with custom directives with <input …> tags in it’s template, when they are inside an angular form. If you declare an input inside a form, editing the input’s field will alter form’s properties, like pristine, touched,
Continue readingAngular 2 custom form control with multiple inputs in template-driven way
Issue My domain model is vm = { name: ‘John Doe’, // input in parent form account: { // child component with 2 inputs acc1: ’08’, acc2: ‘6523’ } }; Parent form is template-driven, looks like <form #form=”ngForm” name=”form” novalidate
Continue readingHow to get selected option from select and assign it to select ngModel
Issue I have the following select menu: <div class=”medium-3 columns”> <label>First Menu <select name=”first-menu”> <option *ngFor=”let i of items” [value]=”i.name”>{{i.name}}</option> </select> </label> </div> I would assing a model to the select menu so i edited the code in the following
Continue readingAngular 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 readingAngular2- RC6 Custom Form Controls Not working
Issue I have updated my Angular2 RC5 application to RC6. I have developed some custom form controls based on this tutorial from Thoughtram. Everything was working until RC5, however after update the validation is not working anymore after a bit
Continue readingAngular 2 – Single Form Component for Create and Edit
Issue I’m looking for some good advice / best practice to reuse my Form Component. Data Model: class Contact { id?: String; name: String; } When creating a new Contact there’s of course no id, that’s why it’s optional in
Continue readingGet control properties inside control component
Issue I created a custom input component but I want to work with errors inside the component. So to make validation work I need to get errors from control object. Is it possible? I did my component exactly like here.
Continue readingangular2 Form within ngfor
Issue I am building an order list that pushes the products with qty to the cart in Angular2. However, it says that it cannot find the property “sku” of undefined. I believe it’s the problem of having formcontrol within *ngfor.
Continue readingUsing 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 readingDisabled input validation in dynamic form
Issue I have a dynamic form (made an example using angular.io dynamic form live example plunkr) and I want to disable an input of this form, to display it as a readonly information. So I decided to add disabled attribute
Continue readingWhich @angular/forms version for angular 2 RC7?
Issue I’m in the process of upgrading an Angular 2 app from RC5 to RC7. @angular/forms package version is 0.3.0, and I could not find a newer one. Still, in 2.0.0-rc.6 the Type declaration was deprecated in favour of Type<T>.
Continue readingCan't make Validator interface to work on template-driven Angular 2 custom component
Issue I have a domain model for bank account: export interface BankAccount { acc1: string, acc2: string, acc3: string, acc4: string } Parent form is template-driven, captures name and bank account number. To capture bank account number which is comprised
Continue readingAngular2 – 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 readingHow 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 readingAngular 2.0.0 final – Custom Pipe filtering with multiple from field conditions
Issue I am trying to filter foods with multiple from field conditions (input & drop-down). I can filter them separately, but I can’t figure out how to make them work together. I’ve created two separate Custom Pipes (one for the
Continue readingSet 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 readingDetect if component has NgModel set in Angular 2
Issue I would like to know if a component has its [(ngModel)] set. I’m creating a typeahead component and would like to know if the ngModel is set to the element. Something like this: my-form.component.html … <my-custom-typeahead [(ngModel)]=”somevariable” name=”someinput1″><my-custom-typeahead> <my-custom-typeahead
Continue readingAngular2 custom form control including textfield and error message
Issue I would like to write custom form control including a textfield and a error message tooltip, which works with model-driven form. At RC5, the code like following probably worked fine, but at 2.0, it doesn’t. https://embed.plnkr.co/bvFbsf5q74j7eHWuh5y7/ Is there a
Continue readingAngular 2 forms with contentEditable div and ngModel support
Issue I’m trying to use Angular 2 Forms, but instead of using input I would like to use editable div. This works: <input type=”text” [(ngModel)]=”value”> But this will throw an error: <div contentEditable=”true” [(ngModel)]=”value”></div> TypeError: setting a property that has
Continue readingAngular 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 readingAngular2 Forms disable control in component with a data-bound value
Issue I am disabling controls when the user is not in edit mode. this.theForm = this.builder.group({ name: [{ value: this.model.name, disabled: !this.isEditMode}, Validators.required], }) When they change to edit mode I want the control to be enabled. However, it seems
Continue readingUsing template driven form with dynamic input list (ngFor)
Issue I am new to web development and is working on a MEAN stack project using angular2. I am trying to add template-driven form with dynamic list of input using ngFor – however I did observe an abnormal behavior with
Continue readingUse 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 readingangular 2 : after submitting data the validation is fire
Issue i am not using Form tag in my html code the data is clear successfully and the route is injected also but the validation is fire after i make submit and new <div class=”col-lg-6 col-md-8″> <input type=”text” [disabled]=”!isEditable” class=”form-control”
Continue readingAngular2 form ControlGroup who hold an undefined number of Control
Issue How to manage with Angular2 a form who hold an undefined number of field ? In my case, I need to create a from where user can add and delete some block of fileds. It’s like an address book
Continue readingRun 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 readingAngular2 ES5 – overriding Content-Type in HTTP POST header
Issue Trying to override content type for the header, but it’s still coming at text/plain. There’s a way to doit with Ben Nadel’s GateWayAPI, but hoping there’s a solution that doesn’t involve custom wrapping. var url = this.url; var body
Continue readingWhy using ngSubmit instead of onSubmit
Issue Whats the reason for using ngSubmit to submit a form instead of using onSubmit at the submit button in angular 2. Solution ngSubmit is a in-built directive of Angular2 which is used to submit Angular2 form without clicking any
Continue readingAngular 2 : Template driven form, pass object from selected element to submitting object
Issue Hello I am new to Angular 2 and I’m searching for a good way to solve this from some time. So I have user object that contains another object inside. That user is an interface : export interface userModel{
Continue readingAngular 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 readingAngular2 template driven forms: how to create field validation for a custom form control?
Issue I want to create a custom form control that handles any errors on itself. This means showing the error inside this component. I created a component which implements ControlValueAccessor. I can read the error form the form like this:
Continue readingForm validation is not working with Angular 2 FormBuilder in Ionic 2
Issue I am building a Ionic 2 (typescript) application. Having problem ONLY in a simple model-driven form validation in checkbox (ion-checkbox tag). I’m using FormBuilder to build the form module. I want the form to be validated / not validated
Continue readingcheck and uncheck checkbox in angular 2 via spacebar
Issue I am new to angular 2 and trying to implement one checkbox functionality i.e checkbox should get checked and unchecked once i hit spacebar. Code for checkbox in component.html- <md-checkbox #checkBox (keyup)=”handleCheckBoxKeyUp($event,checkBox)” name=”” value=””></md-checkbox> Code for checkbox selection via
Continue readingBinding for attribute Angular 2 doesn't update associated input with bound id
Issue I have a checkbox within my component with bindings like so: <input type=”checkbox” [name]=”name” [id]=”id” /><label [htmlFor]=”id”></label> When the component loads I can inspect the element and find that the values passed to those inputs are bound, but when
Continue readingAngular2 enable/disable formcontrol on http response not working
Issue I have formcontrol, when i provide [disable]=”xyz” where xyz is variable in component assign from http response, angular2 give following warning. It looks like you’re using the disabled attribute with a reactive form directive. If you set disabled to
Continue readingHow 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 readingAngular 2 dynamic form get complex values
Issue I have implemented dynamic forms in angular based on their Dynamic forms cookbook tutorial. My inputs have id attributes as well. How do I process the form when it is submitted? The tutorial suggests doing: his.payLoad = JSON.stringify(this.form.value); but
Continue readingAngular 2 dynamic form get complex values
Issue I have implemented dynamic forms in angular based on their Dynamic forms cookbook tutorial. My inputs have id attributes as well. How do I process the form when it is submitted? The tutorial suggests doing: his.payLoad = JSON.stringify(this.form.value); but
Continue readingAdding 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 readingtouched/untouched not updating in custom input component – Angular 2
Issue I have a custom input component that is updating validation and states with the exception of touched/untouched. Everything else state-wise (pristine/dirty) works as expected. Here’s a plunker: https://plnkr.co/edit/O9KWzwhjvySnXd7vyo71 import { Component, OnInit, Input, ElementRef, forwardRef, Renderer } from ‘@angular/core’;
Continue readingHow to subscribe to changes of only one key of form group in Angular2
Issue I have a userForm group which has keys name, email and phone. Also I have a onValueChanged function which one subscribes to form changes and validate name, email and phone. And onValueChanged runs every time, when name or email
Continue readingShow errors in Angular2 forms if form items empty, but user submit form
Issue I have a userForm group which has keys name, email and phone. Also I have a onValueChanged function which one subscribes to form changes and validate data. buildForm(): void { this.userForm = this.fb.group({ ‘name’: [”, [ Validators.required, ] ],
Continue readingHow to load custom components dynamically to div? Angular2
Issue ANGULAR2, I want to load all my custom component into a html div based on customComponentsList. My actual scenario is considor i have A(0-row,0-column),B(0,1),C(0,2),D(1,0),E(1,1),F(2,0), G(2,1), H(2-row,2-column)) custom components. I have to display in div as per row and column
Continue readingAngular 2 – Only Allow 2 Decimal Places For Amounts
Issue Im new to Angular 2 and i wa wondering if there is a way to restict and amount field to only allow 2 decimal places. I have tried the below as i have read a few places it should
Continue readingHow to register a dynamically added custom component as a form control within a formgroup
Issue I have created some custom components, each of which implements ControlValueAccessor, in order that they may function as controls within a FormGroup. Usually, the only thing left to do would be to add the formControlName directive to each custom
Continue readingAngular2 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 readingHow do I register for keyup event using NG2 reactive forms
Issue In NG2, declaratively: you can use (keyup.enter) for registering “press-enter” events. Like this: <input type=”text” #txtEnteredMessage (keyup.enter)=”sendMessage(txtEnteredMessage.value);”> In NG2, reactive forms: I can use the valueChanges observable to listen for changes. But this is not triggered when pressing enter.
Continue readingHow to correctly import FormGroup in NgModule in Angular 2
Issue I try to import FromGroup, FormBuilder and FormControl to my CustomModule: import { FormsModule, FormGroup } from ‘@angular/forms’; @NgModule({ imports: [ FormsModule, FormGroup ] }) But it throws an error: EXCEPTION: Uncaught (in promise): Error: Unexpected value ‘FormGroup’ imported
Continue readingAngular 2 Form Required validation fires after submit
Issue I have created a form that creates a sort of social media Post. The problem is that after all the fields are filled out, and I hit submit, the validation still fires after the post is submitted. I have
Continue readingAngular 2 ngFor ngModel Checkboxes Two Way Data Binding In Edit Form
Issue I’m trying to create a form that allows you to edit the currently selected task. The forms populates data from the selected task. I have checkboxes that uses ngModel for two way data binding. I also have checkboxes on
Continue readingHTTP 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 readingEvents not firing within checkboxes in Angular2
Issue I have tried everything I can think of to get events to fire when a checkbox changes state but I can’t seem to get it working. Here is the html <div *ngIf=”role?.ACTIVE_FLAG === ‘Y'”> <div class=”label”> Active Record </div>
Continue readingPre-fill input text boxes from query params on Angular 2
Issue I have a form on one page with 2 input boxes and when i click submit then the router navigates to another page with 2 input boxes and a submit button. So far i’ve managed to pass the query
Continue readingCustom Control: ControlValueAccessor does not work
Issue I have a component which is wrapping a form control input field, for this i’m trying to implement the ControlValueAccessor. But i don’t get it working. custom-input.component.ts: import { Component, Input } from ‘@angular/core’; import { ControlValueAccessor, FormGroup }
Continue readinghow to use ngFor in angular2 formControl
Issue I try to use formcontrolName bind the json data from the ngFor, but I don’t know how to bind it. My way is not working,anyone has any idea? <p *ngFor=”let user of searchuser” formControlName=”username”>{{user.username}}</p> <p *ngFor=”let tool of searchtool”
Continue readingModel 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 readingWhy is my ng2 validator wrapping my validation messages in `\n`?
Issue Implementing the iterative error-text-accumulation pattern from the angular2 documentation, I accumulate all the messages from my custom form validators into a single string to display to the user: onValueChanged(data?: any) { if (!this.heroForm) { return; } const form =
Continue readingAngular2 Formbuilder – Referencing FormArray Element
Issue We have a form that takes a service response in order to populate a table (our FormArray) with the correct field names. Given the correct form field names, we’re trying to populate the fields for some parameters with another
Continue readingAngular 2 filtering data using pipes
Issue I have to filter a lot of information on a page coming from a database. I need to filter this by town/county, parking, county and it needs to have a custom search field. The type of information coming in
Continue readingForm not sending out select and checkbox inputs in Angular 2
Issue I’m working on a small Angular 2 To-do app. I didn’t want to have any problems with browser compatibility with inputs types like date, datetime-local, etc., so I did make <select> inputs for user to type in the date
Continue readingAngular2 can I get the validators set on a form control?
Issue I wrote a custom control component and I want to get which validators are set on it. I want te get which validators are set so I can add a * for a required field for example. I am
Continue readingUsing FormBuilder to highlight a pristine but invalid form
Issue Using FormBuilder in Angular 2 to highlight dirty and invalid fields is easy. However, you can submit a pristine but invalid form without ever changing the fields to dirty. For example, this code will show that when you submit
Continue readingAngular2 custom component button can not Connect to outside form
Issue I have a problem. My custom component has a button that reset formControlName, but it’s not work. My custom component value is rest, but this value not connect to formControlName. ex:https://plnkr.co/edit/r6BBF3?p=preview My custom component: export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any =
Continue readingangular2 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 readingValidate 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 readingAngular 2 form.value property is undefined
Issue I’m trying to use the name and [(ngModel)] template driven forms syntax for the first time, on a custom control which uses a controlValueAccessor which I am also using for the first time. When I enter some words into
Continue readingProgrammatcally 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 readingCreate custom validators for dynamic forms angular 2
Issue I just red angular 2 cookbook in how you I can create dynamic forms but I wander how I can add custom validators to particular field. questions.forEach(question => { group[question.key] = question.required ? new FormControl(question.value || ”, Validators.required) :
Continue readingModel 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 readingForm Validation for Dynamically added and removed form Elements
Issue I have a form element in which I can add and remove value dynamically. For example in the below code domain can be added and removed using addDomain and removeDomain <div *ngFor=”let item of company.domains”> <div class=”row”> <div class=”col-lg-9″>
Continue readingCustom Validator – Pass in Parameter
Issue I have this custom validator that checks if the categories field of my form has a value, and if it does, then if the mealTypes field is null, then sets mealTypes to be invalid. It is placed just outside
Continue readingAngular 2 Custom Validator with Observable Parameter
Issue I have this custom validator: export const mealTypesValidator = (mealSelected: boolean) => { return (control: FormControl) => { var mealTypes = control.value; if (mealTypes) { if (mealTypes.length < 1 && mealSelected) { return { mealTypesValid: { valid: false }
Continue readingConverting circular structure to JSON EXCEPTION in Angular2 Form
Issue This is my first time trying to submit data to JSON. I’m trying to add it to the table of JSON, but am getting the following error EXCEPTION: Error in ./FormComponent class FormComponent – inline template:2:32 caused by: Converting
Continue readingBuild a reactive form where fields & values are populated in childrens components?
Issue I’m trying to build a reactive form nested in multiple components. I’ve beed looking for something like this everywhere: Parent component: The top one contains the <form [formGroup]=”form” novalidate> Children component is inside the parent component. It contains *ngFor
Continue readingangular2 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 readingAngular2 Trigger form.valueChanges manually
Issue I’m subscribing to my form changes with: this.form.valueChanges.subscribe(formData => { // Data is saved here. }); When I click a button in my form it changes one of the input values. Somehow the valueChanges subscribe is not being triggered.
Continue readingValidating angular2 control on blur or any other event
Issue I am working on validating forms in Angular2, I used default validators and some custom validation functions to validate. Also I implemented async validation from server. Now the problem is, It is validating control on change event and executing
Continue readingAngular 2: Add validators to ngModelGroup
Issue I am using a ngModelGroup directive to group several form inputs together. In the docs (https://angular.io/docs/ts/latest/api/forms/index/NgModelGroup-directive.html) I read that there is a validators: any[] property. Does this mean I can add a custom validator function which validates only that
Continue readingHow do I detect changes that occur to one element of an Angular 2 reactive/dynamic form?
Issue I am trying to detect the change in one specific form element that was built using reactive forms. I used *ngFor and *ngSwitch directives to build a reactive form as demonstrated in https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#. My form currently contains input type
Continue readingAngular2 populating Bootstrap 4 modal form inputs with previously clicked data
Issue Using Angular2, on my main page I have a table that sends the data of whichever row was clicked on to a Bootstrap 4 modal that pops up using a button on the main page. The modal contains form
Continue readingRetrieve data first in order to set default form values? (Angular2)
Issue The Problem I’m setting up quite a complicated form, and each time I submit a PATCH request the values reset to null. In the form control when I try to set the default value to data loaded in the
Continue readingbinding angular object to model-driven form in angular2
Issue I have created custom controls(in component class) with binding objects to form element in html, but there is an error message shown in consele that I couldnt solve, actually message makes no sense(formGroup is special key why it tries
Continue reading