angular2-forms

Angular2 Form validation: model-driven form broken after update

岁酱吖の 提交于 2019-12-10 11:38:53
问题 Since I updated from Angular 2.0.0 to 2.4.4 today, my model driven form isn't working anymore. this.creationForm = this.fb.group({ ... SomeProp: [[], [<any>Validators.required]] }); SomeProp should be valid when at least one value is in the array. When debugging I saw that there are some values in the array. Somehow it's still invalid. I'm not sure if I missed any breaking changes. Update January 23th I downgraded to forms@2.4.1. The issue isn't existing anymore. So the "fix" mentioned in the

Issue with TypeScript compilation in Angular2 Forms

会有一股神秘感。 提交于 2019-12-10 11:19:53
问题 I have defined a form in Angular2 like that: this.form = this._formBuilder.group({ password: ['',Validators.required], passwordRepeat: ['',Validators.required] }); where public form:ControlGroup Which is fine, as: _formBuilder = FormBuilder.group(controlsConfig: { [key: string]: any; }, extra?: { [key: string]: any; }): modelModule.ControlGroup it returns ControlGroup . Now, in my component I am using: this.user.password = this.passwordEditForm.controls.password.value; Which throws me

Angular reactive form binding not working

半腔热情 提交于 2019-12-10 10:56:20
问题 I'm trying to create nested reactive forms here : https://stackblitz.com/edit/angular-mgrfbj This is the project heirarchy: ---create company form (hello.component.ts) --- company details form (company-details.component.ts) --- [ employee details form (employee-details.component.ts) employee details form employee details form ... ] For such nested forms, I have to use ViewProviders and FormGroupDirective as given in this video: The first nested form ( company-details.component.ts ) is working

Angular2 forms throws Unexpected character “EOF” ("

好久不见. 提交于 2019-12-10 10:53:49
问题 [note] this question is merely to give aid to other people who google for this error, and I've added my answer myself. I formatted the question poorly, as I didn't want/expect any answers to this. Thought SO would mark my question with a tag or smtn when I ticket the "Answer your own question, Q/A style" -.- I was messing around with making forms, and I got this error message: Unexpected character "EOF" (" Google gave me several results, but none of them were very useful. This issue plagued

setValidators in custom control without from reference in Angular

£可爱£侵袭症+ 提交于 2019-12-10 09:25:17
问题 i have created a custom input control. I don't want to create any custom validation. I want to use default required, minLength, maxLength etc.I know i can do like this this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]); but i can't send form reference from parent component. How can i use setValidator inside textbox component. // input-box.component.ts import { Component, Input, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR,

Using Angular 2 focus on next input field with enter key press

≯℡__Kan透↙ 提交于 2019-12-10 08:17:25
问题 I am new in angular 2. How can I move focus to next control on key enter in Angular 2. I implement this code but how not working properly. Please suggest me how I do this. Thanks My component code import { Component,Injectable,Inject,OnInit, OnDestroy, EventEmitter, Output, Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core'; import {Http, Response} from '@angular/http'; import {TestService} from '../../services/test.service'; import 'rxjs/add/operator/map'; import

ViewDestroyedError: Attempt to use a destroyed view: detectChanges in Angular 4

柔情痞子 提交于 2019-12-10 08:07:22
问题 i am new to Angular 4 and trying to build a simple routing but when i am trying to redirect on successful register using this.router.navigate(['./admin/login']); so its throwing this error ViewDestroyedError: Attempt to use a destroyed view: detectChanges in console.log . Here is how my register.component.ts file looks like: import { Component, OnDestroy } from '@angular/core'; import { Router } from "@angular/router"; import { ChangeDetectionStrategy } from '@angular/core'; import {

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

淺唱寂寞╮ 提交于 2019-12-10 07:50:05
问题 I 'am facing this frustrating issue There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 This is what my app.module.ts contains import { BrowserModule } from '@angular

Angular Form Control valueChanges not working

别说谁变了你拦得住时间么 提交于 2019-12-10 02:46:55
问题 I want to get one of my forms ("family") value if changed by subscribe but it seems something wrong, because I got nothing on my console's log. import { Component , AfterViewInit } from '@angular/core'; import {FormGroup,FormBuilder} from '@angular/forms'; import {Observable} from 'rxjs/Rx'; @Component({ selector: 'app-root', template: `<h1>Hello World!</h1> <form [formGroup]="frm1"> <input type="text" formControlName="name" > <input type="text" formControlName="family"> </form> `, }) export

How to split a string in angular 2

陌路散爱 提交于 2019-12-10 02:36:47
问题 I have an email sending scenario in which there is an input box of 'To'(whom you want to send a message). app.html <input type="text" class="form-control" [(ngModel)]="email.Tos"> Now I want that when a user input the multiple emailId in input box by comma separated, then in my model, 'Tos' value should bind in an Array of string. Like : ["abc@gmail,com" , "xyz@gmail.com"]. Now, please tell me how to split the input box value as per my requirement. 回答1: You need to use split() function.