我认为这可能是 Reactive Form 的一个错误。我很感激更有经验的 Angular 专家的帮助。
症状：在指定时间内无法输入超过 1 个字符。
发生：当输入是 FormArray 中的 FormArray 时
我已经包含了一个 Plunker 链接，如下所示：https ://embed.plnkr.co/zl2BQe/ 。
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
//app.component.ts
import { Component, OnInit} from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms'; …我的代码在开发模式下构建和运行完美.当我为生产而构建时,我在此行中收到此错误:
<div *ngFor="let child of form.controls.emailsArray.controls; let i=index">
表单构建如下:
public form: FormGroup;
private control: FormArray;
private emailsModel = { emails: ['','','','','']} // the model, ready to hold the emails
private fb : FormBuilder;
constructor() {}
ngOnInit() {
this.fb = new FormBuilder;
this.form = this.fb.group({
emailsArray: this.fb.array([])
});
this.control = <FormArray>this.form.controls['emailsArray'];
this.patch();
}
private patch(): void {
// iterate the object model and extra values, binding them to the controls
this.emailsModel.emails.forEach((item) => {
this.control.push(this.patchValues(item));
})
}
private patchValues(item: string): AbstractControl { …我有以下代码动态添加一个包含标题和两个单选按钮的表单组来创建一个条件，有效地提供其标题以及它是否是可接受的条件：
export enum Acceptability {
ACCEPTABLE,
INACCEPTABLE
}
export interface Condition {
title: string;
acceptability: Acceptability;
}
export class AddCondition implements OnInit {
form: FormGroup;
ACCEPTABILITY = Acceptability;
constructor(private fb: FormBuilder) {}
ngOnInit() {
// build the form
this.form = this.fb.group({
conditions: this.fb.array([])
});
}
get conditions(): FormArray {
return this.form.get('conditions') as FormArray;
}
addCondition() {
this.conditions.push(this.fb.group({
title: ['', Validators.required],
acceptability: ['', Validators.required]
}));
}
}<div formArrayName="conditions">
<div *ngFor="let condition of conditions.controls; let i=index" [formGroupName]="i">
<input class="form-control" formControlName="title" type="text" …I was trying to use extra parameter map provided by Angular FormBuilder
group(controlsConfig: {
[key: string]: any;
}, extra: {
[key: string]: any;
} | null = null): FormGroup
Docs : FormBuilder
But facing
this.validator is not a function
If i pass a single validator instead of an array, the above error vanishes but the validation does not happen?
Can someone help me with this or provide the correct way of using the extra map parameter?
My component and its …
我有一个可以在控制输入值更改时进行计算的表格。
这是我的form_group样子：
form_group = this.fb.group({
control1: [],
control2: [],
control3: [],
...
control10: [],
});
我可以通过form_group.valueChanges观察来检测所有控件值的变化，并进行计算。但是我想排除一些不需要执行此操作的控件。
但是无论如何，如何不检测特定控件上的更改？
在其中编写a form_group.get('controlN').valueChanges并进行计算非常麻烦。我的表单中有5个或更多控件。
我正在尝试使用电子邮件和电话号码创建一个简单的angular 2 反应式表单。下面是我的代码。我在这里面临两个问题。
最初验证按钮应该被禁用。它应该被启用，只有在输入电子邮件字段时。
第二个问题是我想一次只启用一个字段。如果用户开始输入电子邮件，则应禁用电话号码，反之亦然。如果输入电子邮件或电话号码，将启用保存按钮
我如何实现这一目标？
<form [formGroup]="personalDtlsForm">
<div class="form-group" [ngClass]="displayFieldCss('inputValue')">
<div class="row">
<div class="col">
<label for="inputValue" class="control-label required">Email</label>
</div>
</div>
<div class="row">
<div class="col-9">
<input type="text" id="email" class="form-control" formControlName="inputValue">
</div>
<div class="col-3">
<button type="button" id="verifyBtn" class="btn btn-primary btn-large" (click)="verify()">Verify</button>
</div>
</div>
</div>
<div class="form-group row" [ngClass]="displayFieldCss('phoneNo')">
<div class="col paddingTop">
<label for="phoneNo" class="userID control-label textColor">Phone
</label>
<input type="number" class="form-control" id="phoneNo" formControlName="phoneNo">
</div>
</div>
<div class="viewdetailbtn">
<button type="button" [disabled]="!personalDtlsForm.valid" class="btn btn-primary btn-large btnwidth marginBottom" (click)="savePersonalDtls()">Save</button>
</div>
</form>
this.personalDtlsForm = …我使用 angular 6 的反应形式制作了一个包含电子邮件用户名和头像等字段的表单。我知道我需要表单数据来上传图像，但我不知道如何在 angular 6 的反应形式中使用它。任何人都可以提供帮助？
有没有一种方法可以在现有数据模型的基础上使用所有验证魔术来创建反应形式。在下面的示例中，作者将整个新对象传递到formbuilder中，但是我想要实现的是一种优雅的方式来告诉formbuilder哪个字段是必需字段或需要其他验证。
https://malcoded.com/posts/angular-fundamentals-reactive-forms
export class PersonalData {
email: string = '';
mobile: string = '';
country: string = '';
}
...
createFormGroupWithBuilderAndModel(formBuilder: FormBuilder) {
return formBuilder.group({
personalData: formBuilder.group(new PersonalData()),
requestType: '',
text: ''
});
}
我只想跳过为模型中的每个字段分配FormControl的过程。
@编辑
经过一些研究和来自@ xrobert35的一点提示，我想尝试并使用https://www.npmjs.com/package/@rxweb/reactive-form-validators
我正在做一个项目，我想在表单数组字段上进行所需的验证。这是我的模板
<div formArrayName="price" *ngFor="let p of vehicleForm.get('prices.price').controls; let i=index">
<div class="price-form-repeater" [formGroupName]="i">
<div class="col-md-6 col-sm-12 cust-col">
<label class="col-sm-4 dark-label" for="priceType">Price Type:</label>
<div class="col-md-6" >
<select id="priceType" formControlName="type" class="form-control" data-placeholder="select" >
<option ></option><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<option value="public">Public</option>
</select>
<div *ngIf="p.controls.type.errors && (p.controls['type'].dirty || p.controls['type'].touched)) ||
(p.controls['type'].untouched && formSubmitAttempt)"class="alert alert-danger">
<div [hidden]="(!p.controls['type'].errors.required)">Price type is required.</div>
</div>
</div>
</div>
</div>
</div>
这是我的组件
prices: this.fb.group({
price: this.fb.array([this.priceField()]) ,
})
priceField():FormGroup {
return this.fb.group({
type: ['',Validators.required],
vat_type: …我有一个主要的组件FormGroup。在此<my-parent></my-parent>组件内部，有一个子组件<my-child></my-child>。
子组件具有一个*ngIf="some-conditional"，在子组件内部，我具有一个快速填充按钮，该按钮基本上patchValue在几个子FormGroup控件上执行。
它成功地将子代添加FormGroup到父代FormGroup，但是父代内部的子代的值始终为空。
我尝试过两种添加控件的方式（均不成功），即在父级组件内部添加setter，并从子级组件内部进行发射，并将新值重新分配给父级FormGroup。
这是一个演示如何即时尝试的堆叠闪电战。提前致谢！
// PARENT COMPONENT
import {
Component,
ViewChild
} from '@angular/core';
import {
FormBuilder,
FormGroup,
Validators
} from '@angular/forms';
import {
ChildComponent
} from './child.component';
@Component({
selector: 'my-parent',
templateUrl: './parent.component.html',
styleUrls: ['./app.component.scss']
})
export class ParentComponent {
isChildFormSet = false;
showChildComponent = false;
exampleParentForm: FormGroup;
// @ViewChild(ChildComponent)
// set userForm(childForm: ChildComponent) {
// if (childForm && …