我正在创建一个嵌套表单组,如https://plnkr.co/edit/c93yFe2r83cvjiRvl6Uj?p=preview所示.
这是来自https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#reactive的示例分支
Angular中的示例显示validationMessages在表单没有任何嵌套组时使用.当我有嵌套表单组时,我不确定如何扩展它.以下是我要创建的示例表单和验证消息.
buildForm(): void {
this.heroForm = this.fb.group({
'name': [this.hero.name, [
Validators.required,
Validators.minLength(4),
Validators.maxLength(24),
forbiddenNameValidator(/bob/i)
]
],
'address': this.fb.group({
'city': [''],
'state': ['']
}),
'alterEgo': [this.hero.alterEgo],
'power': [this.hero.power, Validators.required]
});
this.heroForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged(); // (re)set validation messages now
}
预期formErrors和validationMessages
formErrors = {
'name': '',
'power': '',
'address': {
'state': '',
'city': ''
}
};
validationMessages = {
'name': {
'required': 'Name is required.',
'minlength': 'Name must be …我正在尝试在 Angular 4.0.2 中创建一个反应式表单，它有一个<textarea>从数据库中提取的带有默认内容的字段。中的内容<textarea>显示没有任何问题，但是当我formControlName="sectionContent"向<textarea>元素添加 时，其中的内容消失了。
<textarea formControlName="sectionContent ">{{ section.sectionContent }}</textarea>
这个问题只发生在<textarea>元素上，因为我<input>在表单中有其他字段，但这些内容仍然出现。
FormGroup 看起来像这样：
this.sectionForm = new FormGroup({
sectionTitle: new FormControl(),
sectionContent : new FormControl()
});
有没有人遇到过这个问题？
我正在使用角形的反应式表单，我需要将开始日期“开始日期”与结束日期“结束日期”进行比较，两个控件均在“ dateLessThan”函数中进行了验证，但是问题是我不知道如何要求控制权正在评估
//Some stuff
public fechaInicio = new FormControl('', [
Validators.required
, this.dateLessThanTo
]);
public fechaFin = new FormControl('', [
Validators.required
, this.dateLessThan
]);
createForm() {
this.contratoForm = this.formBuilder.group({
fechas: this.formBuilder.group({
fechaInicio: this.fechaInicio,
fechaFin: this.fechaFin
}, { validator: this.dateLessThan('fechaInicio', 'fechaFin') }),
});
}
在这里，我需要知道比较日期的控件名称：
dateLessThanTo(fieldControl: FormControl) {
//
//if (fechaInicio.value > FechaFin.value){
// return true;
//}
//else{
// return false;
// }
}
//Some stuff
Stackblitz：https ://stackblitz.com/angular/nvpdgegebrol
这实际上是官方的 Angular Material 示例分叉并更改了逻辑以显示针对 minLength 验证而不是电子邮件的 mat 错误。
它适用于必需的验证和电子邮件验证，并且消息显示并且一切正常，但是 minLength *ngIf 根本不显示。
代码：
HTML：
<mat-error *ngIf="emailFormControl.hasError('minLength') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
TS：
emailFormControl = new FormControl('', [
Validators.required,
Validators.minLength(10),
]);
还有`ErrorstateMatcher，但它是样板文件并且有效。
我使用Reactive FormsModule在Angular2.现在,我要禁用所有控件FormGroup.我可以readOnly在所有控件中使用属性,但它不是更好的解决方案,因为我们可能会在不久的将来添加新字段.
那么,无论如何都要禁用FormGroup控件吗？
I have a reactive form created in component and some formControls defined on it.
Now i need to disable one of the radio button from a radio button group based on some condition.
How do i do it while creating formControl?
PFB the code snippet:
createForm() {
this.heroForm = this.fb.group({
confirmActionRadioGrp: this.fb.group({
updateAction: new FormControl({ value: '' })
})
});
}
inside my template:
<div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input type="radio" class="custom-control-input" value="1" formControlName="updateAction">
<input type="radio" class="custom-control-input" value="2" formControlName="updateAction">
<input …forms reactive-forms angular angular-reactive-forms angular4-forms
我有我的反应形式，看起来像这样
<form [formGroup]="addInvoiceForm" (submit)="onAddInvoiceFormSubmit()">
<div [formArrayName]="itemRows">
<div *ngFor="let itemrow of addInvoiceForm.controls.itemRows.controls; let i=index" [formGroupName]="i">
<input autocomplete="off" type="text" formControlName="itemqty">
<input autocomplete="off" type="text" formControlName="itemrate">
<!-- the input field below is to be summed -->
<input autocomplete="off" type="text" formControlName="itemamt" [ngModel]="itemrow.get('itemqty').value * itemrow.get('itemrate').value">
</div>
</div>
<button type="button" (click)="addItemRow()">Add New Row</button>
</form>
我想对用户创建的所有行的 itemamt 求和并将它们传递到表单数据中。有人可以帮助我，告诉我如何对表单中的所有 itemamt 字段求和并并排显示用户的总金额是多少？
页面最初是作为模板驱动的表单编写的,但正在转换为被动,以便添加自动保存功能.
在页面组件的构造函数中,我定义了响应式表单变量:
this.form = fb.group({
reviewer: '',
position: '',
officeName: '',
rows: fb.array([]),
comments1: '',
comments2: '',
comments3: ''
});
'rows'是与此问题相关的字段.
在ngInit中,通过web api发出请求以检索持久化的表单数据.数据作为行数组检索,每行包含6个单元格的数组.第三个单元格将绑定到FormControl,其他单元格将呈现为静态文本.
this.rows = summaryReportQuestion.map(summaryReportQuestionObj => {
return {
cells: [
summaryReportQuestionObj.questionID,
summaryReportQuestionObj.question,
(summaryReportQuestionObj.columnSign == '$' ? (summaryReportQuestionObj.columnSign + ' ' + summaryReportQuestionObj.target) : summaryReportQuestionObj.target + ' ' + summaryReportQuestionObj.columnSign),
(summaryReportQuestionObj.budget == null ? summaryReportQuestionObj.budget : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.budget), false) : summaryReportQuestionObj.budget + ' ' + summaryReportQuestionObj.columnSign)),
(summaryReportQuestionObj.average == null ? summaryReportQuestionObj.average …我有以下代码动态添加一个包含标题和两个单选按钮的表单组来创建一个条件，有效地提供其标题以及它是否是可接受的条件：
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" …我正在尝试将电子邮件验证应用于 mat-chip。以下是我实现相同目标的尝试。
https://stackblitz.com/edit/mat-chip-demo-yvmxsk
我的要求是在用户输入无效的电子邮件 ID 时显示 mat-error 并仅突出显示无效的电子邮件 ID。有人可以帮助我吗？
angular-material angular-material2 reactive-forms angular angular-reactive-forms