angular2-forms

Wait for Angular 2 to load/resolve FormBuilder/ControlGroups before rendering view/template

大憨熊 提交于 2019-12-25 07:46:06
问题 Is there a way to tell Angular2 to wait until a FormBuilder and its elements (with their associated default values) have loaded before rendering the template? Currently I have the following in my form <form (ngSubmit)="submitFees()" [ngFormModel]="FeeForm"> <div class="form-group row"> <div class="col-sm-12"> <input type="number" id="Fees" class="form-control" placeholder="Fee" required [ngFormControl]="FeeForm.controls['ContentFee']" [(ngModel)]="Fee"> </div> Fee: {{postFee*1.2| number:'1.2

Angular2 radio button validation

三世轮回 提交于 2019-12-25 02:47:24
问题 How to validate radio button and checkbox and zip code in angular 2 i tried but not working.Anyone can find the solutions.please help me to resolve this issue. Demo:https://stackblitz.com/edit/angular-7-template-driven-form-validation-ndspdl?file=app/app.component.html <div class="form-group"> Radio Buttons: <div *ngFor="let enum of enum_details"> <label for="enum_answer_{{enum.name}}"> <input id="enum_answer_{{enum.name}}" [value]='enum.name' type="radio" name="enums" enums="ngModel" [

How to display the datetime popup in the table row

风格不统一 提交于 2019-12-24 23:52:14
问题 I am using ng2 date-timepicker and i want the popup of the datetime to be displayed completely so that i can select the date and time. I am displaying the input box in the table for its proper alignment with other input boxes and validations to be displayed below it. How it appears right now is- This is the image component.html <div style="padding-left: 0; padding-bottom:10px"> <div class="row form-inline"> <div class="col-lg-12 "> <form [formGroup]="dateTransactionForm"> <div class=" form

Angular 2 ContentChild Apply Html Attributes

断了今生、忘了曾经 提交于 2019-12-24 16:41:49
问题 I have a custom component that applies bootstrap form group to my form fields. In my component I have below properties: import { Component, Input, ContentChild } from '@angular/core'; import { NgControl } from '@angular/common'; @Component({ selector: 'form-field', template: ` <div class="form-group" [ngClass]="{'has-error':(state && !state.valid && state.touched)}"> <label *ngIf="label" [attr.for]="state.name" class="col-sm-3 control-label">{{label}}</label> <div class="col-sm-9"> <ng

Is it possible to have multiple level Nested Route in Angular2

好久不见. 提交于 2019-12-24 16:40:34
问题 Is it possible to have multiple level nesting for angular routing. I am trying to achieve below but it says [Child routes are not allowed for "/cash/..". Use "..." on the parent's route path]. Intended route /storeselector /forms - shows all forms /forms/cash/ - user select cash form from list of forms and on load it will shows all orders /forms/cash/id:1/ shows order details /forms/cash/edit/1 edit order 1 below is my code. app component @Component({ selector : 'forms-app', templateUrl :

How to access the control directly by its formGroupName

纵然是瞬间 提交于 2019-12-24 10:36:32
问题 In This form I have to access the control of formControlName="last" to show errors of it. <div [formGroup]="form"> <div formGroupName="name"> <input formControlName="first" placeholder="First name"> <input formControlName="last" placeholder="Last name"> <span *ngIf="name['controls'].last.invalid">invalid</span> </div> <input formControlName="email" placeholder="Email"> <button type="submit">Submit</button> </div> This code has thrown an error 'controls' of undefined( Bold Formatted line ).

Angular2 deletes invalid inputs for <input type=“number”>?

青春壹個敷衍的年華 提交于 2019-12-24 10:12:42
问题 See this plunkr: https://plnkr.co/edit/nGKAnXrrzgKSxpkdvEhX?p=preview I have a simple <form> in Angular that displays a <input type="number"> field. When I enter something like "123" everything is ok. But the input "123-456" seems to be ok, too, although this is not a "real" number. I found out that Angular sets the myNumber.value to null and so everything seems to be ok. What I want to achieve is that Angular doesn't reset the input "123-456" to null and instead tells me that the input is

Angular2 the for attribute on a label does not link it to the input

情到浓时终转凉″ 提交于 2019-12-24 08:00:46
问题 I am working with Angular2 RC5. I have a component encapsulating a label and an input import { Component, Input} from '@angular/core'; @Component({ selector: 'my-input', template: ` <div class="mx-field" > <label [attr.for]="id"><ng-content></ng-content></label> <input type='text' id = "{{id}}" /> </div> ` }) export class InputComponent { @Input() id: string; } It is called from any template as follows <my-input id="inputcontrol">input</my-input> The problem is that when I click on the label

Compile template before projecting the content. Dynamic projecting?

痴心易碎 提交于 2019-12-24 07:13:46
问题 In my project I am meeting several times the same problem, and yet, I have not been able to find a proper solution. I suspect it is all part of this issue, but it sounds to me like a very normal use case. Many times I have a component with a template such as: <my-component><ng-content></ng-content></my-component> where somewhere in the projected content is trying to get the instance of <my-component> . This simply does not work because the projected component gets resolved before <my

does ngModel create two way data binding if used without “banana” wrapping

孤者浪人 提交于 2019-12-24 06:21:10
问题 In this article Todd Motto explains that: ngModel = if no binding or value is assigned, ngModel will look for a name attribute and assign that value as a new Object key to the global ngForm Object: <form novalidate #f="ngForm"> ... <input type="text" placeholder="Your full name" ngModel> ... </form> And about "banana" wrapping: [(ngModel)] = two-way binding syntax, can set initial data from the bound component class, but also update it: <form #f="ngForm"> ... <input type="text" placeholder=