angular2-forms

问题 I am trying to iterate over a formArray in my component but I get the following error Error: Cannot find control with unspecified name attribute Here is what the logic looks like on my class file export class AreasFormComponent implements OnInit { public initialState: any; public areasForm: FormGroup; constructor(private fb: FormBuilder) { } private area(): any { return this.fb.group({ name: ['', [Validators.required]], latLong: ['', [Validators.required]], details: ['', [Validators.required]

问题 I'm trying to get a simple example working using reactive/model driven forms. I want to bind an array of checkboxes to a list of values, and not a list of boolean values. This plunker shows the problem: http://plnkr.co/edit/a9OdMAq2YIwQFo7gixbj?p=preview The values bound to the forms are booleans, I'd like the answer to be something like ["value1", "value2", etc] I have something like this, but I don't know how to get the result that I want? The template: <form [formGroup]="checkboxGroup">

问题 I'm working on a small reusable Component which styles radio buttons and emits the selected values. import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; @Component({ moduleId: module.id, selector: 'button-select', template: `<div class="toggle-group"> <div *ngFor="let choice of choices"> <input type="radio" id="{{ groupName + choice }}" name="{{groupName}}" value="{{ choice }}" [checked]="choice === defaultChoice" [(ngModel)]="value" (ngModelChange)="choose($event)"

问题 is there a way that all validators of a reactive forms can be triggered upon submit and not only by the "dirty" and "touch" events? The reason for this is we have a very large forms which doesn't indicate if a field is required or not, and user might miss some of the required control, so upon submit, it is expected that all of the invalid fields which are missed by the end user will be shown. I have tried marking the form as "touched" by using the FormGroup.markAsTouched(true); it worked, and

问题 I try to make a dynamic form (so you can limitless add items to a list), but somehow the content of my list is not getting send because it can't find the control with path: Cannot find control with path: 'list_items -> list_item' My component: @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.css'] }) export class ListComponent implements OnInit { listForm: FormGroup; constructor(private nodeService: NodeService, private messageService:

问题 I am aware that Angular 2 currently lacks a way to easily reset a form to a pristine state. Poking around I have found a solution like the one below that resets the form fields. It has been suggested that I need to drop the control group and create a new one to rebuild the form as pristine. I am having difficulty figuring out the best way to do this. I know I need to wrap the form building within a function but I am running into errors when doing that within the constructor. What would be the

问题 What is the best way to use two-way-binding (syntax-sugar) in Angular 2 with the safe navigation operator. I've tried the following. <input [(ngModel)]="x?.y?.z"> But this is not supported. Is there a way to use sth. like this? 回答1: You can split up- and downwards-binding like <input [ngModel]="x?.y?.z" (ngModelChange)="x?.y?.z ? x.y.z = $event : null"> 回答2: <input [ngModel]="x?.y?.z" (keyup)="changeMe($event.target.value)"> {{x?.y?.z}} export class ParentCmp { x={y:{z:"a"}} changeMe(val) {

问题 I am trying to toggle button based on backend response.If the response is Yes, toggle button should be ON, if the response is No, toggle button should be off. Below is my html code <div class="btn-group btn-toggle"> <button class="btn btn-sm btn-default">ON</button> <button class="btn btn-sm btn-primary ">OFF</button> </div> Below is my component code, where i calling a get service which returns response either Yes or No.I am calling the service in ngOnit() because i want to check whether the

问题 I want to clear all the fields inside a md-form at once using an external clear button like you do in normal HTML Forms. The problem with md-form is that it contains md-input fields instead of regular input fields. So the simple reset function won't trigger that. I've set the type of each field to 'search' that gives some kind of control but it's like u have to manually click and remove each value of the filed. I want to erase them all at once. Is there a proper way to to this? Thanks in

问题 In my Angular 2 form, I have the following typescript: export class UserEditComponent implements OnChanges { @Input() userModel: IUserModel; @Output() onSave: EventEmitter<IUserModel> = new EventEmitter<IUserModel>(); @ViewChild("userEditForm") userEditForm: FormControl; private userNameIsValid = true; constructor(private httpService: HttpService) { } ngOnChanges (changes: SimpleChanges) { this.userEditForm.resetForm(); console.log(this.userEditForm); } .... } and template html: <form class=