angular2-forms

问题 Using Angular 2, two-way binding is easy in template-driven forms - you just use the banana box syntax. How would you replicate this behavior in a model-driven form? For example, here is a standard reactive form. Let's pretend it's much more complicated than it looks, with lots and lots of various inputs and business logic, and therefore more appropriate for a model-driven approach than a template-driven approach. export class ExampleModel { public name: string; // ... lots of other inputs }

问题 I am trying to save files along with FormData in Angular 5. I can get the single file, but have no idea how to get all the files uploaded. I have three image files and input fields, tried searching examples. But only got for multiple file uploads. I want to upload each and every single file from this form. Below is my code : import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Location } from '@angular/common'; import { ActivatedRoute } from '@angular/router'; import

问题 I want a button to be disabled until a checkbox has been checked using a FormBuilder for Angular. I don't want to explicitly check the value of the checkbox and would prefer to use a validator so that I can simply check form.valid . In both validation cases below the checkbox is interface ValidationResult { [key:string]:boolean; } export class CheckboxValidator { static checked(control:Control) { return { "checked": control.value }; } } @Component({ selector: 'my-form', directives: [FORM

问题 I'm trying to add validations such that the end date can't be before the start date. Unfortunately I have no idea how to do that, and I didn't find any helpful advice in the internet so far. My form looks like this: editAndUpdateForm(tageler: Tageler) { this.tageler = tageler; this.tagelerForm = this.fb.group({ title: [this.tageler.title, Validators.required], text: this.tageler.text, group: [[this.tageler.group], Validators.required], date_start: new Date(this.tageler.start).toISOString()

问题 So I'm trying to make a directive that can manipulate a FormControl. It seems that if I use the long syntax for declaring form controls in the template instead, I can pass the control to a directive to do stuff with it as a direct @Input() bind; i.e.: With the following template: <form [formGroup]="myForm"> <input type="text" id="myText" [formControl]="myForm.controls['myText']" my-directive> </form> And the following component logic: @Component({ // Properties go here. }) class MyComponent {

问题 So I'm trying to make a directive that can manipulate a FormControl. It seems that if I use the long syntax for declaring form controls in the template instead, I can pass the control to a directive to do stuff with it as a direct @Input() bind; i.e.: With the following template: <form [formGroup]="myForm"> <input type="text" id="myText" [formControl]="myForm.controls['myText']" my-directive> </form> And the following component logic: @Component({ // Properties go here. }) class MyComponent {

问题 I have component which has a form and some child components within the form. The child components are created using *ngFor and each child contains input elements. Angular2 compiler is giving errors like [formGroup] is not defined. Is this implementation a correct? Parent Component: <section class="data-body"> <form [formGroup]="checkoutForm" novalidate> <app-checkout-product-view *ngFor="let item of checkoutData.products" [_product]="item" formGroupName="products"></app-checkout-product-view>

问题 I have component which has a form and some child components within the form. The child components are created using *ngFor and each child contains input elements. Angular2 compiler is giving errors like [formGroup] is not defined. Is this implementation a correct? Parent Component: <section class="data-body"> <form [formGroup]="checkoutForm" novalidate> <app-checkout-product-view *ngFor="let item of checkoutData.products" [_product]="item" formGroupName="products"></app-checkout-product-view>

问题 I'm trying to create a parent and child component where the child component is going to have a states drop down. Can someone help me understand how I can access the states drop down value in Parent Component? Here is my sample code. /app/app.ts import {Component} from 'angular2/core' import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common' import {State} from './state' @Component({ selector: 'my-app', providers: [FormBuilder], templateUrl: 'app/app.html',

问题 I'm trying to create a parent and child component where the child component is going to have a states drop down. Can someone help me understand how I can access the states drop down value in Parent Component? Here is my sample code. /app/app.ts import {Component} from 'angular2/core' import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common' import {State} from './state' @Component({ selector: 'my-app', providers: [FormBuilder], templateUrl: 'app/app.html',