angular2-forms

问题 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 to the question model: export class QuestionBase<T>{ value: T; key: string; label: string; required: boolean; order: number; controlType: string; disabled?:boolean; constructor(options: { value?: T, key?: string, label?: string, required?: boolean, order?: number, controlType?:

问题 In Angular 2, creating a simple app but when formBuilder is attached with DOM control in case of select list , First option is coming blank - even if I provided some initial value in formBuilder that value is not coming to DOM element Before FomBuilder Select List Genral LDAP After FomBuilder Select List No option appearing initially Genral LDAP File 1 - form.component.ts import { Component } from '@angular/core'; import { FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES, FormGroup,

问题 I want to understand the difference between template reference variable notations as mentioned below in the input text boxes. <input type="text" name='name' #name [(ngModel)]='model'> <input type="text" name='name' ref-name [(ngModel)]='model'> What's the difference between using #name and ref-name . Does the scope of the variable changes on using ref-name ? Can anybody please suggest the best practice and reason ? 回答1: They are two different syntaxes for literally exactly the same thing. You

问题 I want to create a custom InputCustom component and use it to create model-driven forms. My custom component just wraps an input field and uses Bootstrap material design for look'n'feel. @Component({ selector:'inputCustom', template:` <div class="form-group label-floating is-empty"> <label class="control-label" for="input">Type here</label> <input class="form-control" id="input" type="text"> <p class="help-block">Some help text</p> <span class="material-input"></span> </div> `}) class

问题 I'm new in Angular 2 framework. I appreciate any help. I have usual component in angular 2: import {FORM_DIRECTIVES, FormBuilder, Validators} from 'angular2/common'; export class TestComponent { public values = ['value1', 'value2', 'value3', 'value4']; } Then I'm injecting FormBuilder into the constructor function: @Inject(FormBuilder) public fb HTML contain next markup: <input [(ngModel)]="formData.title" type="text" class="form-control" ngControl="title"> Title and description works great.

问题 Consider the following simple example in a component of an Angular 4 application. It shows a simple HTML form with two input fields. One input field is directly implemented, the second is within a child component: <form #personForm="ngForm"> <input type="text" required name="firstname [(ngModel)]="firstname"/> <app-smart-input required [(model)]="lastname"></app-smart-input> <button [disabled]="personForm.valid === false">Send</button> </form> The child component is defined as follows: import

问题 I don't know why each time I press ENTER key in an input element the application execute the first function it finds in the html . How Can I prevent it ? I tried to make some test with (keyup.enter) event but it first execute the first (click) function, then the the (keyup.enter) function... This is the code: html form <form role="form" [formGroup]="FormOffertDetail" (keyup.enter)="checkKey()"> <p-dialog modal="modal" [(visible)]="displayModal_Duplicate" width="300" responsive="true"> <p

问题 This is my current code: <select name="role" [(ngModel)]="user.role"> <option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'">{{role.name}}</option> </select> I'm loading all the roles in an array, and the user class has a Role attribute (which is not loaded like user.role = roles[0] but just through the backend data). The problem is that the selected attribute is not working, and my select is not going to the correct role. What am I doing

问题 I want to submit form to external site by POSTing the input fields in old school way(non Ajax) , it submits too but Angular giving me error in console before jumping to external page. I used following code in HTML(template) <form (submit)="onSubmit($event)" method="POST" [formGroup]="form" *ngIf='form' action="https://www.sandbox.paypal.com/cgi-bin/webscr" > In component onSubmit(obj: any) { if (!this.form.valid) { this.helper.makeFieldsDirtyAndTouched(this.form); } else { this.loader = true;

问题 If I submit a form using button type="submit" the form validation messages appear and everything is fine. However if I have a button (or link) with (click)="myhandler()" then the validations do not appear. How can I either: tag the element as requiring validators to run, or programatically run and show validation messages. Note: These are simple validations like required on input fields. Sample Code: <form (ngSubmit)="save()"> <input required type='text' [(ngModel)]="name"> <!-- Shows