angular - 错误类型错误:this.validator 不是函数 FormArray
问题描述
我有一个错误,仅当控件位于 formArray 内时才会发生,我有一个 mat-select 来选择星期几,正是由于这个控件,我得到了以下错误。
我做错了什么导致此错误发生?
vendor.js:65387 ERROR TypeError: this.validator is not a function
at FormControl._runValidator (vendor.js:106921)
at FormControl.updateValueAndValidity (vendor.js:106882)
at new FormControl (vendor.js:107326)
at FormBuilder.control (vendor.js:111089)
at FormBuilder._createControl (vendor.js:111149)
at vendor.js:111128
at Array.forEach (<anonymous>)
at FormBuilder._reduceControls (vendor.js:111123)
at FormBuilder.group (vendor.js:111041)
at :4200/admin-admin-module.js:7871
element
来自is 中的对象的返回professionals.forEach
;
element: {
daysService: [2, 3],
endService: "",
id: "45ySYbmImayrgv7teqWr",
startService: "",
name: "Name professional",
rooms: [],
};
form.component.ts:
this.weekDays = [
{ label: 'Sunday', value: 0 },
{ label: 'Monday', value: 1 },
{ label: 'Tuesday', value: 2 },
{ label: 'Wednesday', value: 3 },
{ label: 'Thursday', value: 4 },
{ label: 'Friday', value: 5 },
{ label: 'Saturday', value: 6 },
];
this.professionals
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(professionals => {
if (!professionals) return;
this.setProfessionalsUnity(professionals);
});
private _buildForm(): void {
this.form = this._formBuilder.group({
professionals: this._formBuilder.array([])
});
}
get professionalsArray() {
return <FormArray>this.form.get('professionals');
}
public setProfessionalsUnity(professionals): void {
this.professionalsArray.clear();
let control = this.professionalsArray;
if (!professionals) return;
professionals.forEach(element => {
// I believe the error is happening because of this line ...
control.push(this._formBuilder.group(element));
});
}
public addGroupProfessional() {
return this._formBuilder.group({
id: [''],
name: [''],
rooms: [''],
daysService: [''],
startService: [''],
endService: ['']
});
}
表单.html:
<form [formGroup]="form">
<mat-accordion formArrayName="professionals">
<mat-expansion-panel *ngFor="let group of professionalArray.controls; let i = index" [formGroupName]="i"
[expanded]="indexExpanded == i && newProfessional">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon class="secondary-text mr-12">person</mat-icon>
{{ group.get('name').value }}
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
<div fxLayout="row" fxLayoutAlign="start">
<mat-form-field fxFlex="50">
<input matInput placeholder="Name of professional..." formControlName="name">
</mat-form-field>
</div>
<div class="h3 blue-fg mb-12">Attendance</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start">
<mat-form-field fxFlex="50">
<mat-select placeholder="Days you attend" formControlName="daysService" multiple>
<mat-option *ngFor="let day of weekDays" [value]="day.value">{{day.label}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-action-row>
<button mat-button color="warn" (click)="removeProfessional(i)" *ngIf="group.value.id">Delete</button>
<button mat-button color="accent" [disabled]="group.value.name.length < 5" *ngIf="group.value.id"
(click)="updateProfessional(i)">Save</button>
<button mat-button color="accent" [disabled]="group.value.name.length < 5" *ngIf="!group.value.id"
(click)="addProfessional(i)">Add</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
</form>
解决方案
尝试使用这种方式:
daysService: [[2, 3]]
推荐阅读
- qt - Tableview 行应在 QML 中按下时更改
- angular - 如何自动显示数据列表的下拉列表?
- python - 如何将 Sklearn lda 模型输出保存到 csv?
- javascript - 更改 Javascript 日期格式
- c++ - QRegExp 不匹配任何东西
- c# - 通过参数传递“IS NULL”
- sql - 在子查询的返回值上使用 case
- automated-tests - 带有弹出消息的测试用例的关键词
- progressive-web-apps - 渐进式 Web 应用程序的 Lighthouse 评分
- swift - socket.on 回调在 socket.io swift 中重复多次