我是Angular 2/4的新手,也是Web开发的新手.我有这个表格,以采购形式收集产品变体的信息.我已经构建了一个formArray of formGroups of variants,如下面的HTML所示.
<form [formGroup]="this.purchaseInvoiceItemVariantsForm" novalidate>
<div formArrayName="variants">
<div *ngFor="let variant of this.purchaseInvoiceItemVariantsForm.controls.variants.controls; let i = index">
<div [formGroupName]="i">
<md-input-container>
<input mdInput placeholder="Product Code" formControlName="productBarcode" class="input--small" [readonly]="this.mode == 'view'">
</md-input-container>
<md-input-container>
<input mdInput placeholder="Color" formControlName="variant1" class="input--small" [readonly]="this.mode == 'view'" required>
</md-input-container>
<md-input-container>
<input mdInput placeholder="Size" formControlName="variant2" class="input--small" [readonly]="this.mode == 'view'" required>
</md-input-container>
<md-input-container>
<input mdInput placeholder="MRP" formControlName="mrp" class="input--small" [readonly]="this.mode == 'view'">
</md-input-container>
<md-input-container>
<input mdInput placeholder="Purchase Price" formControlName="purchasePrice" class="input--small" [readonly]="this.mode == 'view'"
required>
</md-input-container>
<md-input-container>
<input mdInput …是否可以在angular2中设置为无效的表单控件？(用过的表单构建器)
例如.我有form-> exampleFrom&field-> exampleControl
我试过这个,没有成功:
this.exampleFrom.controls['exampleControl'].invalid
我正在尝试在角度反应形式上设置条件形式验证,需要一些帮助.
我有一个表单控件,用户将其实体类型设置为Individual或Business
<select formControlName="entity">
<option [value]="individual">Individual</option>
<option [value]="business">Business</option>
</select>
然后我根据选择的实体显示或隐藏表单输入:
<div *ngIf="myForm.controls.entity.value == individual>
<input formControlName="fullName" />
</div>
<div *ngIf="myForm.controls.entity.value == business>
<input formControlName="businessName" />
</div>
如果选择了相应的实体,如何才能使两个输入都需要？
我正在构建有角度的反应形式.我有简单的单选按钮,性别名称:
this._form = this._formBuilder.group({
gender: ['', Validators.required]
});
模板:
<div class="form-group">
<h4>What is your gender?</h4>
<div class="form-group">
<label class="custom-control custom-radio">
<input value="male" name="gender" type="radio" class="custom-control-input" formControlName="gender">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Male</span>
</label>
<label class="custom-control custom-radio">
<input value="female" name="gender" type="radio" class="custom-control-input" formControlName="gender">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Female</span>
</label>
<app-field-error-display [displayError]="formValidationService.IsFieldInvalid(_form,'gender','required')" errorMsg="Field is required"></app-field-error-display>
</div>
</div>
我可以按名称访问控制字段,如下所示:
public GetControl(form: FormGroup, field: string){
return form.get(field);
}
基于此,如何访问type ="radio"的属性值？我想知道输入控件是否是无线电类型.
是否有必要取消订阅被动表单控件的valueChanges订阅或Angular将取消订阅它？
在路由器:
根据官方文档,Angular应该取消订阅,但显然,有一个错误.
所以我对此问题的关注与FormControl的valueChanges相同.
我正在尝试从API加载值后更新表单值.我尝试使用该*ngIf技术,但即使设置了表单,表单也不可见.
我无法共享整个项目,但这里是组件模板和控制器
模板
<div class="page-title">
<h3> Edit news </h3>
</div>
<div class="partner-add-form">
<ng-container *ngIf='newsForm'>
<form action="" [formGroup]='newsForm' (ngSubmit)="onSubmit()">
<div class="row ">
<div class="input-field col s12 tooltip">
<input formControlName='title' [id]="'title'" [type]="'text'">
<label [for]="'title'">Title</label>
<validator-errors [control]='newsForm.get("title")'></validator-errors>
</div>
<div class="input-field col s12 tooltip">
<textarea class="materialize-textarea" formControlName='content' [id]="'content'"></textarea>
<label [for]="'content'">Content</label>
<validator-errors [control]='newsForm.get("content")'></validator-errors>
</div>
<div class="input-field col s12 margin-reset">
<mat-form-field class="full-width">
<mat-select [formControl]='newsForm.controls["partner_id"]'>
<mat-option disabled selected>Categories</mat-option>
<mat-option *ngFor="let partner of partners.data" [value]="partner.id">
{{ partner.name }} </mat-option>
</mat-select>
</mat-form-field>
<validator-errors [control]='newsForm.controls["partner_id"]'></validator-errors>
</div>
<div class="file-field …我有一个带有2个控件(port_start和port_end)的反应式表单,它们具有以下要求:
这是我到目前为止所尝试的:
[...]
this.formModel.addControl('port_start',
new FormControl(object.port_start ? object.port_start : 0,
[Validators.required, Validators.min(0), Validators.max(65535), this.minMaxValidator('port_start', 'port_end').bind(this)]));
this.formModel.addControl('port_end',
new FormControl(object.ort_end ? object.port_end : 0,
[Validators.required, Validators.min(0), Validators.max(65535), this.minMaxValidator('port_start', 'port_end').bind(this)]));
[...]
这是自定义验证器功能:
minMaxValidator = function(startControl : string, endControl : string): ValidatorFn {
return (control: FormControl): {[key: string]: any} => {
let valid = true;
let valStart = 0;
let valEnd = 0;
if(this.formModel.controls[startControl] && this.formModel.controls[endControl]) {
valStart = <number>this.formModel.controls[startControl].value;
valEnd = <number>this.formModel.controls[endControl].value;
}
valid = valEnd >= valStart;
return valid …我认为这是我的实现的问题，但从我提出的这个问题来看，我用于创建动态 FormArray 的代码似乎应该是功能性的。当我将它集成到我的项目中时，删除函数确实从 FormArray 中删除了元素，但它不会反映在界面中/不会从 DOM 中删除对象。可能是什么原因造成的？
import {
Component,
VERSION
} from '@angular/core';
import {
FormGroup,
FormControl,
FormArray,
Validators,
FormBuilder
} from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
objectProps: any[];
public dataObject = [{
"label": "Name",
"name": "name",
"type": "text",
"data": ""
},
{
"label": "Contacts",
"name": "contacts",
"type": "inputarray",
"array": []
}
]
form: FormGroup;
constructor(private _fb: FormBuilder) {}
ngOnInit() {
const formGroup = {};
for (let field of …由于各种原因，我有几个包装 PrimeNG 组件的自定义组件。我的组件的某些实例以反应形式使用，并且该字段的“要求”是使用Validators.required验证器设置的。
PrimeNG 组件提供一个required属性。
如何检查组件的 NgControl 是否有所需的验证器？存在.disabled和.invalid，但.invalid可以表示任何意思。
这是我现在使用的，它适用于下拉菜单，但对于任何其他类型的输入来说都是不正确的。
@Component({
selector: 'my-component',
templateUrl: 'my.component.html'
})
export class MyComponent implements OnInit, ControlValueAccessor {
@Input()
public disabled: boolean
@Input()
public required: boolean
constructor(
@Optional() @Self() public ngControl: NgControl
) {
if (this.ngControl != null) {
this.ngControl.valueAccessor = this;
}
}
ngOnInit() {
if (this.ngControl) {
this.required = this.ngControl.invalid;
this.disabled = this.ngControl.disabled;
}
}
}
我确信有更好的方法可以做到这一点，但我不知道如何做。
我正在使用包含 formArray、formGroups 和 formControls 的多重嵌套（无限级）反应表单的值。哪个存储在数据库中。
目前，我正在使用递归函数修补表单，该函数循环遍历整个 JSON，并根据键和值创建 formArrays、formGroups 和 formControls。
现在的问题是，我使用的这种方法从性能角度来看并不好，那么有没有更好的方法来一次性修补这种多重嵌套形式呢？（只需创建表单，无需以 HTML 形式显示）
这是供问题参考的简化 JSON -
任何部分都可以有子部分，然后子部分可以有某种类型的部分
const formDataSections = [
{
index: 1,
sectionName: "",
subSections: [
{
index: 1,
subSectionName: "",
sections: [
{
index: null,
sectionName: "",
subSections: [
{
index: null,
subSectionName: "",
sections: [
{
index: null,
sectionName: "",
},
{
index: null,
sectionName: "",
subSections: [
{
index: null,
subSectionName: "",
sections: [
{
index: null,
sectionName: "",
},
{
index: null,
sectionName: "", …