在Ionic 2中，我试图创建一个动态表单，该表单应显示一个切换按钮列表。
为此，我尝试使用FormArray并依赖于Angular文档，主要是在这篇文章上
基于此，我实现了以下
<form *ngIf="accountForm" [formGroup]="accountForm">
<ion-list>
<!-- Personal info -->
<ion-list-header padding-top>
Informations personnelles
</ion-list-header>
<ion-item>
<ion-label stacked>Prénom</ion-label>
<ion-input formControlName="firstname" [value]="(user | async)?.info.firstname" type="text"></ion-input>
</ion-item>
<!-- Sport info -->
<ion-list-header padding-top>
Mes préférences sportives
</ion-list-header>
<ion-list formArrayName="sports">
<ion-item *ngFor="let sport of accountForm.controls.sports.controls; let i = index" [formGroupName]="i">
<ion-label>{{sport.name | hashtag}}</ion-label>
<ion-toggle formControlName="{{sport.name}}"></ion-toggle>
</ion-item>
</ion-list>
</ion-list>
</form>
控制者
ionViewDidLoad() {
console.log('MyAccountPage#ionViewDidLoad');
// Retrieve the whole sport list
this.sportList$ = this.dbService.getSportList();
this.sportList$.subscribe(list => {
// Build form
let sportFormArr: …林新与活性形式和进出口试图使具有分量indicadores有answers：
有了这个组件：
addAnswers(indicador: Indicador, answer?: any):void {
const indicadoresFormArray = <FormArray>this.customForm.controls['indicadores'];
let label = answer ? answer.label : '';
let value = answer ? answer.value : '';
let superi = 0;
for(let i = 0; i < indicadoresFormArray.length; i++) {
if(indicadoresFormArray.value[i].id == indicador.id) {
superi = i;
}
}
(<FormArray>(<FormGroup>(indicadoresFormArray).controls[superi])
.controls['answers']).push(
new FormGroup({
label: new FormControl(label),
value: new FormControl(value)
})
)
}
还有模板
<div *ngFor="let indicador of customForm.controls['indicadores'].controls">
<div class="row" *ngFor="let answer of indicador.controls['answers'].controls">
<div class="input-field …我有一个使用名为ng-select增强选择输入的指令的表单。在我的设置中，我允许用户进行一些选择，然后单击“过滤器”按钮。
单击此按钮后，我禁用了输入。
HTML：
<div class="form-group">
<div class="input-group">
<ng-select #cc formControlName="costCenter" (removed)="updateChoices(cc.active, 'costCenter')" [allowClear]="true" [multiple]="true"
[items]="getCostCenters()" placeholder="Select one or more Cost Centers">
</ng-select>
<span class="input-group-btn">
<button #b_cc class="btn btn-sm btn-default" type="button" title="Update Filter" (click)="updateChoices(cc.active, 'costCenter', cc, b_cc)"><i class="fa fa-filter"></i></button>
</span>
</div>
</div>
组件功能：
/**
* Upon selecting a data point, reload available options
* based on data selected.
*
* @param formValues
* @param field
*/
updateChoices(formValues, field, selectInput, button): void {
// Show the loading indicator
this.showLoader = …我正在使用Angular的反应形式，并希望根据控件的invalid属性的值将CSS样式应用于FormArray中的控件。我想出了以下方法，但我认为ngClass属性中的表达式太长且太复杂。是否有更简洁的方法来访问FormArray中控件的无效属性？
模板：
<form [formGroup]="myForm" class="form-horizontal">
<div class="form-group" [ngClass]="{'has-error': myForm.controls.name.invalid }">
<label class="control-label">Name</label>
<input formControlName="name" type="text" class="form-control" />
</div>
<div formArrayName="array1">
<div *ngFor="let f of array1_FA.controls; let i = index" [formGroupName]="i">
<div>
<div class="form-group"
[ngClass]="{'has-error': myForm.controls.array1.at(i).controls.question.invalid}">
<label class="control-label">Question #{{i+1}}</label>
<input formControlName="question" class="form-control" type="text" />
</div>
<div class="form-group"
[ngClass]="{'has-error': myForm.controls.array1.at(i).controls.response.invalid}">
<label class="control-label">Answer #{{i+1}}</label>
<input formControlName="response" class="form-control" type="text" />
</div>
</div>
</div>
</div>
</form>
零件：
import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'form-array-validation', …根据我之前已经选择的内容，我如何获得默认值。就像我编辑一些东西并且它有一个下拉菜单一样，我可以看到我之前提交的默认值，所以它不会混淆用户。例如，在我的代码中，如果我单击编辑按钮，它会将我重定向到页面并启动下面的“patchValues()”函数，它可以从供应商列表中进行选择。我想要的是，如果我点击编辑按钮，我可以在选择选项中看到一个默认值
TS
patchValues() {
let suppliers = this.myForm.get('suppliers') as FormArray;
this.material.suppliers.forEach(supplier => {
suppliers.push(this.fb.group({
supplier_id: supplier.name,
}))
})
}
HTML
<tr *ngFor="let row of myForm.controls.suppliers.controls; let i = index" [formGroupName]="i">
<td>
<select formControlName="supplier_id" class="col-md-12" >
<option *ngFor="let supplier of suppliers" [value]="supplier.id">
{{supplier.name}}
</option>
</select>
</td>
</tr>
我有一个嵌套的 FormGroup，它看起来像这样：
this.formGroup: FormGroup: {
// ...
controls: {
"GENERAL_AND_PERSONAL_QUESTIONS": { // FormGroup object... }
}
}
对于顶级 FormGroup，我可以轻松添加如下控件：
this.formGroup.addControl(tab.id, this.formBuilder.group({}));
但是，由于某种原因，我无法向子 formGroup 添加任何控件。我尝试像这样添加它们：
// tab.id = "GENERAL_AND_PERSONAL_QUESTIONS";
this.formGroup.get(tab.id).addControl(segment.id, this.formBuilder.group({}));
但它总是抛出一个编译错误说：
Property 'addControl' does not exist on type 'AbstractControl'.
任何帮助是极大的赞赏 ：）
我是 angular2 的新手。我正在使用 ckeditor 创建一个反应式表单。一切都很好，但我的 ckeditor 数据没有发布。它是空的。我正在阅读指南并创建它，但我无法获得完美的结果。
im user form[formGroup] createPage 并在此表单中使用 ckditor。但我无法获得ckeditor的数据。我如何使用表单从 ckeditor 获取数据。在表单提交按钮中单击。
这是我的 ckeditor.ts 文件
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'CKEDITOR',
template: `
<textarea name="targetId" id="targetId" rows="rows" cols="cols">
{{content}}
</textarea>`
})
export class AdminCkeditorComponent implements OnInit {
content: any = "test content";
@Input() targetId;;
@Input() rows = 10;
@Input() cols;
constructor() { }
ngOnInit(){
window['CKEDITOR']['replace']( 'targetId' );
}
}
这是 page.ts 文件
import { FormGroup, FormControl } from '@angular/forms';
import { Component, …如何在Angle 4+中获取FormControl的完整路径？
我有反应形式：
{
name: '',
address: {
city: '',
country: ''
}
}
而且我需要获得完整的控制权：
const addressFormGroup = this.form.get('address');
const cityControl = addressFormGroup.get('city');
cityControl.plsGiveMeFullPath() //address.city
有没有现有的方法来获取cityControl的完整路径：FormGroup？
假设我具有以下表单结构：
this.entryForm = this.formBuilder.group({
date: [{value:'' , disabled: true}, [Validators.required]],
notes: [''],
sum_credit: [{value:'', disabled: true }],
sum_debit: [{value:'', disabled: true}],
items: this.initItems()
});
// set validation function to sum_credit
this.entryForm.controls['sum_credit'].setValidators([CommonValidations.validateSomthing(...)]);
该sum_credit被禁用，因为它的价值时，总是计算。现在，我需要验证sum_credit等于sum_debit，并且我已经在使用validateSomthing函数了。问题是validateSomthing由于控件被禁用，因此未触发。我该如何解决？
谢谢
如何验证mat-chip已将添加到中mat-chip-list。我正在使用ReactiveForms。我已经尝试过required验证器。
该值可以是名称列表，因此在提交表单之前，我需要确保名称列表中至少有1个名称。如果列表为空，mat-error则应显示错误消息。使用required验证器会使表单无效，而不管在列表中添加名称如何。
编辑：反应形式
我试图做一个自定义验证器，现在使用的是反应式表单，而不是模板驱动的表单，但是我无法使它正常工作。我编辑了以下代码以反映我的更改，并创建了此https://stackblitz.com/edit/angular-4d5vfj
的HTML
<form [formGroup]="myForm">
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList formArrayName="names">
<mat-chip *ngFor="let name of myForm.get('names').controls; let i=index;"
[formGroupName]="i"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(myForm, i)">
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="Names"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event, asset)">
</mat-chip-list>
<mat-error>Atleast 1 name need to be added</mat-error>
</mat-form-field>
</form>
TS
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component} from '@angular/core';
import {FormGroup, FormControl, FormBuilder, FormArray} from '@angular/forms';
import {MatChipInputEvent} from '@angular/material';
@Component({
selector: 'chip-list-validation-example', …angular2-forms angular-material2 angular angular-reactive-forms