我正在使用最近发布的 Angular 2.0.0，基本上我有一个组件来初始化它的表单模板的值，该模板由一个输入文本框和一个带有两个输入文本框的 FormGroup 的 formArray 组成。
初始化完成后，绑定工作正常，但是当我将新的 FormGroup 推送到 formArray 时，表单值不会反映新添加的项目，直到我在最初绑定的某个文本框中进行了一些值更改。为什么会出现这种行为，以及如何在添加某些动态 FormGroup 时更新表单值？
我的组件和模板代码是这样的：
//initialize the form values
//this_fb is the form builder
setControlsValues(){
this.form_band = this._fb.group({
name : [ 'test', [ Validators.required ] ],
bands : this._fb.array([
this._fb.group({
name : [ 'band 1', [ Validators.required] ],
score : 10
}),
this._fb.group({
name : [ 'band 2', [ Validators.required] ],
score : 8
})
])
});
}
//push a new FormGroup when user click button
addBand(){
this.form_band.controls.bands.controls.push(
this._fb.group({
name …Angular Form组件类为：
export class SpecsFilterFormComponent implements OnInit {
specFilterForm: FormGroup;
cameraSizeMin = new FormControl("", [Validators.pattern("\s*|[0-9.]*")]);
cameraSizeMax = new FormControl("", [Validators.pattern("\s*|[0-9.]*")]);
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.specFilterForm = this.fb.group({
cameraSize: this.fb.group(
{
cameraSizeMin: this.cameraSizeMin,
cameraSizeMax: this.cameraSizeMax,
})
});
this.specFilterForm.valueChanges.debounceTime(500).filter(
formData => this.specFilterForm.valid)
.subscribe(
formData => {
console.log("do something after validation")
});
}
}
我想添加一个验证以确保cameraSizeMax> = cameraSizeMin，以及如何在控件的cameraSizeMin和cameraSizeMax中应用此验证。
有一个自定义的输入组件，它以反应形式用于验证：
@Component({
moduleId: module.id.toString(),
selector: 'custom-select',
templateUrl: 'custom-select.component.html',
styleUrls: ['custom-select.component.css']
})
export class CustomSelectComponent {
@Input() public items: SelectModel[];
public model: SelectModel;
constructor(private customSelectService: CustomSelectService) {
this.customSelectService.Selected.subscribe((data: SelectModel) => {
this.model = data;
});
}
public newSelect(select: SelectModel): void {
this.customSelectService.updateSelected(select);
}
}
效果很好，我正在custom-select以反应形式使用，并希望按如下所示进行验证：
<custom-select id="country" [items]="selectItems" formControlName="country"></custom-select>
<div *ngIf=" myFrom.controls['country'].invalid && (myFrom.controls['country'].dirty
|| myFrom.controls['country'].touched) " class="ha-control-alert">
<div *ngIf="myFrom.controls['country'].hasError('required')">Country is required</div>
</div>
这就是我在组件中声明表格的方式
this.myFrom = this.formBuilder.group({
country: [null, Validators.required],
})
但是当我添加formControlName验证时，会出现错误，提示名称为'country'的表单控件没有值访问器。我该如何处理？
angular-validation angular angular-reactive-forms angular-forms
我正在使用 angular 创建一个简单的输入表单，如下所示。
我想知道是否有人知道我可以跟踪的方法，如果用户更改控件值然后恢复到原始值，我会称之为“真实”脏状态与否。
所以加载我的“name”属性=“John”。
然后用户删除一个字符以使 name 属性“Jon”，现在我的 contactForm 很脏。
如果用户将光标放回并再次键入“h”name =“John”，即使处于原始状态，我的 contactForm 仍然脏？
import { FormControl } from '@angular/forms';
import { FormBuilder, AbstractControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ContactDetail } from './../../../models/contact-details.model';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'contact-edit-edit-body',
templateUrl: './contact-edit-edit-body.component.html',
styleUrls: ['./contact-edit-edit-body.component.css']
})
export class ContactEditEditBodyComponent implements OnInit {
@Input() contact: ContactDetail = new ContactDetail(0);
contactForm: FormGroup;
name: AbstractControl;
phoneNumber: AbstractControl;
emailAddress: AbstractControl;
constructor(fb: FormBuilder) {
this.contactForm = fb.group({
"name": [this.contact.name], …export class ApplyComponent implements OnInit {
formApply: FormGroup;
postCodeInput: boolean = true;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.formApply = this.fb.group({
firstName: ["", Validators.required],
currentUKAddress: this.fb.group({
flat: ["", Validators.required],
years: ["", Validators.required]
})
});
this.onChanges();
}
onChanges(): void {
...
}
我想听听岁月的变化。无论我在里面尝试了什么，我onChanges()都找不到为什么什么都不起作用......我试过：
- this.formApply.get('currentUKAddress.years').valueChanges.subscribe(data => {
console.log('Form changes', data);
})
- this.formApply.controls.currentUKAddress.get('years').valueChanges.subscribe(data => {
console.log('Form changes', data);
})
- this.formApply.controls.currentUKAddress.controls['years'].valueChanges.subscribe(data => {
console.log('Form changes', data);
})
以及其他东西。在所有情况下，我都会收到 Typescript 编译器错误： 属性不存在于类型 AbstractControl 或 Object 可能为 null。
我目前正在尝试扩展Angular5的FormGroup类型，以实现一个自定义方法，以接收模型状态错误并将其显示到另一个自定义组件中。
不幸的是，我收到的信息不那么丰富：
Error: ServerValidatedForm/src/platform/svalidated/group.component.ts:30:1: Error encountered in metadata generated for exported symbol 'SVFormGroup':
ServerValidatedForm/src/platform/svalidated/group.component.ts:33:22: Metadata collected contains an error that will be reported at runtime: Expression form not supported.
我怀疑TypeScripting本身缺少某些东西。值得高兴的是，我已经清理了node_modules，从项目中删除了所有元数据，然后再次进行了编译，每次遇到相同的错误时，都将重新进行编译。
我正在使用：
"@angular/animations": "5.0.1",
"@angular/cli": "^1.5.0",
"@angular/common": "5.0.1",
"@angular/compiler": "^5.0.1",
"@angular/compiler-cli": "^5.0.1",
"@angular/core": "5.0.1",
"@angular/forms": "^5.0.1"
重要的代码在这里，任何帮助将是有帮助的：
import { Injectable } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { AbstractControlOptions } from "@angular/forms/src/model";
@Injectable()
export class SVFormGroup extends FormGroup {
constructor(
controls: {[key: string]: any},
validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null,
asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null) …我正在建立一个我总是想要endDate> startDate的组件（html，css，spec.ts，ts）。我按照此链接https://material.angular.io/components/datepicker/overview进行了多个日期选择。
以下是我针对startDate和的HTML endDate：
开始日期：
<div class="start-date" fxFlex="50%" fxFlexOrder="1">
<mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
结束日期：
<div class="end-date" fxFlex="50%" fxFlexOrder="2">
<mat-form-field>
<input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
现在下面是我validateForm在页面加载时调用方法的角度代码（ts）。
ngOnInit() {
....
this.validateForm();
}
validateForm() {
this.unavailabilityForm = this.formBuilder.group({
'startDate': ['', Validators.required],
'endDate': ['', Validators.required],
'unavailabilityReason': ['']
});
}
问题陈述：
现在，我需要做的是-如果我选择了某个日期 …
html angular-material angular-components angular angular-forms
我有一个表单来更新角度4中现有模型类的字段的一部分.
我需要在当前模型实例上设置setValue,最后将值重新更新.
问题是我只需要更新模型的某些部分,但角形式会返回错误
"Cannot find form control with name 'fieldname'"
对于我不想编辑的额外字段.
获得所需行为的最佳选择是什么？
我想为我不希望在表单中更新的字段添加隐藏的formControls,但是我们的一些模型非常大,而我们需要用户只编辑它们的一部分.
我必须在最后获得一个更新的模型,用于我们的模型的脏检查和一般更新(与具有多个重复的类相关代码相比,仅用于设置所有formControls的值并从提交时的formControls更新模型)
谢谢.
更新只是为了澄清 - 我想要一个类似于此的行为:
--component.ts
model: Model = someModelWithData;
--component.html
<input type="checkbox" [(NgModel)]="model.FieldOne" />
用户更改FieldOne中的值后,模型仍然已满,但所有其他数据都已更改,但FieldOne已更改.
我正在处理此表单并希望在输入时进行验证。当前的行为是我选择输入，键入，当我单击其他站点时，它会显示错误。我认为当我设置控制、有效和脏时发生的错误，但我无法弄清楚。
打字稿
buildForm(): void {
this.userForm = this.fb.group({
'email': ['', [
Validators.required,
Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
]
],
'password': ['', [
Validators.required,
Validators.minLength(6),
Validators.maxLength(25)
]
],
});
this.userForm.valueChanges.subscribe(data => this.onValueChanged(data));
}
onValueChanged(data?: any) {
if (!this.userForm) { return; }
const form = this.userForm;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.invalid && control.dirty) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] …angular-material angular angular-reactive-forms angular-forms
我在编译表单项目时遇到问题：
\nERROR in Failed to compile entry-point @angular/forms (es2015 as esm2015) due to compilation errors:\n../../../node_modules/@angular/forms/fesm2015/forms.js:6219:1 - error NG1006: Two incompatible decorators on class\n\n6219 class MaxValidator extends AbstractValidatorDirective {\n ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n6220 constructor() {\n ~~~~~~~~~~~~~~~~~~~\n ...\n6237 }\n ~~~~~\n6238 }\n ~\n../../../node_modules/@angular/forms/fesm2015/forms.js:6279:1 - error NG1006: Two incompatible decorators on class\n\n6279 class MinValidator extends AbstractValidatorDirective {\n ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n6280 constructor() {\n ~~~~~~~~~~~~~~~~~~~\n ...\n6297 }\n ~~~~~\n6298 }\n ~\n../../../node_modules/@angular/forms/fesm2015/forms.js:6758:31 - error NG6001: The class 'MinValidator' is listed in the declarations of the NgModule '\xc9\xb5InternalFormsSharedModule', but is not a directive, …