addStop() {
const control = <FormArray>this.editForm.controls['stops'];
control.push(this.initStop());
}
我有这个代码在窗体数组的底部添加一个"停止".但我想将新的"停止"添加到最后一个位置,而不是最后一个位置之前的一个位置.
这不起作用(不完全,我知道数字是错误的.拼接功能不存在)
control.splice(2, 0, this.initStop());
我有一个简单的表格如下:
some.component.html
<form class="example-form" novalidate (ngSubmit)="onSubmit()" autocomplete="off" [formGroup]="testform">
<input type="text" formControlName="name" class="form-control" placeholder="Enter name" required/>
<app-show-errors [control]="claimform.controls.name"></app-show-errors>
<button type="submit" (click)="onSubmit()">Next</button>
</form>
some.component.ts
ngOnInit() {
this.testform= new FormGroup({
name: new FormControl('', { validators: Validators.required})
}, {updateOn: 'submit'});
}
onSubmit() {
if (this.testform.valid) {
alert('saving data');
} else {
this._validationService.validateAllFormFields(this.testform);
}
}
validationService.ts
validateAllFormFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
}); …我正在研究Angular反应形式。这是我的组件类代码：
ngOnInit(){
this.reviewForm = this.fb.group({
'controlArray': new FormArray([])
});
this.showDefaultForm();
}
addForm() {
(<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group({
controlType: control.controlType,
options: control.options,
}));
}
我收到TypeError：this.validator不是与此相关的函数。我认为这是由于将字符串数组（即control.options）分配为FormControl的值。如果我将其设置为FormArray，则此错误将解决，但是我在将其作为FormArray处理为模板时遇到了问题。请告诉我是否不使用FormArray，可以将字符串数组作为值分配给FormControl吗？如果没有，那么如何在模板中将其作为FormArray处理。谢谢
我需要帮助使行仅在选中复选框时才启用。应该禁用默认行，但是仅选中复选框时，将启用该行。这是我的代码的链接
patchValues() {
let rows = this.myForm.get('rows') as FormArray;
this.orders.forEach(material => {
material.materials.forEach(x => {
rows.push(this.fb.group({
checkbox_value: [null],
material_id: new FormControl({value: x.id, disabled: true}, Validators.required),
material_name: x.name,
quantity: [null, Validators.required]
}))
})
})
}
我有一个复选框和输入。我想做的是在选中复选框时禁用输入，而在取消选中复选框时启用输入。
这是我的表单组：
this.workingTime = this.fb.group({
toggle: false, // this is the checkbox
from: [{ value: null, disabled: false }],
to: [{ value: null, disabled: false }]
});
get toggleControl() { return this.workingTime.get('toggle'); }
我确信这会起作用：
<input [disabled]="toggleControl.value">
但是我在控制台收到警告：
看来您正在使用带有反应形式指令的Disabled属性。如果在组件类中设置此控件时将Disabled设置为true，则实际上将在DOM中为您设置disabled属性。我们建议使用这种方法来避免“检查后更改”错误。
我不能用
from: [{ value: null, disabled: this.toggleControl.value }]
因为toggleControl尚不可用。
有任何想法吗？谢谢
我是Angular的新手，并尝试从以下示例扩展示例代码：Angular 4 Form FormArray添加一个按钮以添加或删除表单输入行
如果在下拉菜单中选择了某个选项，则该选项的新选项应可表示。我到此为止没有问题，但是为那些“较低层选项”实现formControlName标记使我出错：
ContentComponent.html：56错误错误：找不到路径为'inhalt-> 0-> optionsKey'（…）的控件
.html中的确切行是：（输入formControlName =“ optionsKey”）
我在其他线程（Angular 2形式“找不到带有路径的控件”）或（Angular 2反应形式：找不到带有路径的控件）或（错误：找不到带有路径的控件：'x'angular 2）中寻找了那些错误，但是它们的问题是基于没有FormBuilder的ReactiveForm-Components创建的。我使用Formbuilder创建了我的所有ReactiveForm-Components，您将在我的代码中看到它们。
我可能错过了某件事还是做错了方向？
content.html
<h3 class="page-header">Formular-Abschnitt hinzufügen</h3>
<button type="button" (click)="addNewFormControl()" class="btn btn-primary">Neues Formularelement</button><br>
<form [formGroup]="formContent">
<div>
<label>Bezeichnung des Abschnittes</label>
<input formControlName="absatz">
</div>
<div formArrayName="inhalt">
<!--
In the template we are iterating this formarray,
and that is just the path to the formarray, which is:
invoiceForm.controls.itemRows.controls
'invoiceForm' being the complete form object, 'controls' being the content of the form …我试图FormArray在另一个内部添加,FormArray但无法弄清楚如何做到这一点.
我在我的打字稿文件中有这个:
createForm() {
this.myForm = this.formBuilder.group({
people: this.formBuilder.array([
{ addresses: this.formBuilder.array([]) }
])
});
}
基本上,我试图说一个人FormArray,每个人可以有多个地址.我尝试在我的html中渲染它:
<div [formGroup]="myForm">
<div formArrayName="people">
<div *ngFor="let person of people.controls; let i=index">
Person {{ i + 1 }}
<div *ngFor="let address of person.addresses.controls; let j=index">
Address {{ j + 1 }}
</div>
</div>
</div>
</div>
当然,这只是一个例子,我的实际形式会有更多的进展.我有一个"添加人"链接,它调用我的打字稿中的一个函数,将一个对象推送给人FormArray.
当我打电话时createForm(),我在浏览器中收到以下错误:
ERROR TypeError: this.form._updateTreeValidity is not a function
ERROR TypeError: this.form.get is not a function
我究竟做错了什么？我如何完成我想做的事情？任何帮助,将不胜感激!
主题：Angular 6，反应形式，下拉菜单，禁用一个选项：禁用所有功能，而不仅仅是一个预期值，即使检查员说disable = false。
人们很乐意为我解决我的问题：“ Angular 6反应形式-选择选项：禁用以前选择的选项 ”，但是当我遇到障碍时它们似乎消失了，因此我提出了新的问题：
为什么禁用所有选项值，而不是仅禁用应该与该语句匹配的选项值？ [attr.disabled]="uplink2x === dropdown1Val"（即使我禁用了硬编码，nic0而不是dropdown1Val禁用所有选项）
component.ts：
nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10']
this.inputForm = this.fb.group({
upLinks: this.fb.group ({
NumberUplinks: ['2'],
uplinksMgmt: this.fb.group ({
uplink1: ['nic0'],
uplink2: ['nic1'],
uplink3: ['nic3'],
})
})
})
public changedVal(val) {
this.dropdown1Val = val;
}
component.html：
<div class="select" formGroupName="uplinksMgmt">
<select formControlName="uplink1" id="uplink1Id" class="selectBox" (change)="changedVal($event.target.value)">
<option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
</select>
</div>
<div class="select" formGroupName="uplinksMgmt">
<select formControlName="uplink2" id="uplink2Id" class="selectBox" (change)="changedVal($event.target.value)">
<option *ngFor="let uplink2x of nicAdapters" [attr.disabled]="uplink2x …我正在尝试构建跨越多个组件的Reactive-Form,就像这样
<form [formGroup]="myForm" (ngSubmit)="onSubmitted()">
<app-names></app-names>
<app-address></app-address>
<app-phones></app-phones>
<button type="submit">Submit</button>
</form>
当我尝试提交时,我得到空对象.
typescript angular angular-reactive-forms angular-forms angular6
我需要将发布数据发送到API服务器。我有一个表单，它有一个日期选择器字段。现在，如果我将数据发送到服务器，它将发送格式化为服务器拒绝的日期。
这是发送的整个数据的表示形式：
{
address: "Address",
department: 1,
dob: "1997-08-19T18:00:00.000Z",
email: "chitholian@gmail.com",
gender: "male",
hall: 1,
id: 16701016,
name: "Atikur Rahman Chitholian",
phone: "No phone number",
religion: "islam",
semester: 1,
session: "2015 - 2016"
}
这是组件的代码：
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Department, Hall, Semester, Student} from '../custom/interfaces';
import {DepartmentService} from '../services/department.service';
import {MatSnackBar} from '@angular/material';
import {StudentService} from '../services/student.service';
import {Router} from '@angular/router';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-student-reg',
template: `
<form class="panel" …