我遇到了“控制元件”的問題在此處 輸入影像描述 在此處輸入影像描述“物件可能為 'null'.ngtsc(2531)”和“元素隱式具有 'any' 型別，因為型別 'AbstractControl' 沒有索引簽名. 你的意思是叫'get'嗎？ngtsc(7052)”
你可以從這個網站https://csharp-video-tutorials.blogspot.com/2018/10/angular-dynamic-forms-tutorial.html了解我想做什么！我想使用 formArray 來檢查驗證。可以看到下圖整小時輸入都顯示驗證錯誤。因為我沒有使用formArray。當我實作 formArray 時，它會在這一點上出錯。
一開始我使用了這個 => *ngFor="let Skill of employeeForm.get('skills').controls; let i = index" 但是控制元件字顯示為錯誤！！！
.HTML
<form [formGroup]="employeeForm">
<div formArrayName="skills" *ngFor="let skill of employeeForm.get('skills')['controls']; let i = index;">
<div >
<div >
<button type="button" (click)="addSkillButtonClick()">ADD ROW</button>
</div>
</div>
<p-table [loading]="loading" styleClass="text-sm " [ngClass]="{'p-datatable-is-loading': loading}" [value]="dataSource"
[scrollable]="true" scrollHeight="calc(100% 2px)" scrollDirection="both">
<ng-template pTemplate="header">
<tr>
<th style="width: 250px;">Project</th>
<th style="width: 250px;">Process</th>
<th style="width: 200px;">Working Hours</th>
<th alignFrozen="right" pFrozenColumn style="width: 114px;"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-source let-index="rowIndex">
<tr *ngIf="dataSource[index].editing; else viewingMode;" formGroupName="0">
<td style="width: 250px; overflow: visible" >
<div>
<p-autoComplete appendTo="body" #project name="project" [(ngModel)]="dataSource[index].project_id" [suggestions]="projectSuggestions"
field="name" (onSelect)="handleSelectProject($event, index)"
formControlName="project"
(completeMethod)="handleSearchProject($event, index)" (onFocus)="project.show()" placeholder="Search project">
</p-autoComplete>
</div>
</td>
<td style="width: 250px;">
<div>
<p-dropdown formControlName="process" name="process" [ngStyle]="{ width: '100%' }" [(ngModel)]="dataSource[index].process" [options]="processOptions"
placeholder="Select process">
</p-dropdown>
</div>
</td>
<td style="width: 200px;" >
<div ngClass="{'has-error': formErrors.hours }">
<p-inputNumber formControlName="hours" [(ngModel)]="dataSource[index].hour" [id]="'working_hour' index" [name]="'working_hour' index" [min]="0" [max]="24"
placeholder="00" (blur)="logValidationErrors"></p-inputNumber>
<label for="hours" >h</label>
</div>
<div>
<p-inputNumber formControlName="minutes" [(ngModel)]="dataSource[index].minutes" [id]="'working_min' index" [name]="'working_min' index" [min]="0" [max]="59" placeholder="0" ></p-inputNumber>
</div>
<label for="hours" >m</label>
</td>
<td alignFrozen="right" pFrozenColumn style="width: 114px;">
<button [disabled]="dataSource[index].deleting" pButton type="button" (click)="handleDeleteRowClick(index)" icon="pi pi-trash"
></button>
<button pButton type="button" (click)="handleSaveRowClick(index)" icon="pi pi-save"
></button>
</td>
</tr>
</ng-template>
</p-table>
</div>
</form>
.TS
export class DailyReportRegularTableComponent extends DailyReportLog implements OnInit {
@Input() dataSource: UIDailyLogRegularTableInterface[] = [];
@Output() dataSourceChange = new EventEmitter<UIDailyLogRegularTableInterface[]>();
helper!: HelperService
_formHelper: FormService = new FormService;
employeeForm!: FormGroup;
formErrors: any;
validationMessages: any;
constructor(private _helper: HelperService,private formBuilder: FormBuilder,private fb: FormBuilder) {
super();
this.helper = this._helper;
}
ngOnInit(): void {
this.employeeForm = this.fb.group({
skills: this.fb.array([
this.addSkillFormGroup()
])
});
this.employeeForm.valueChanges.subscribe((data) => {
this.logValidationErrors(this.employeeForm)
});
}
addSkillButtonClick(): void {
(<FormArray>this.employeeForm.get('skills')).push(this.addSkillFormGroup());
}
logValidationErrors(group: FormGroup = this.employeeForm): void{
Object.keys(group.controls).forEach((key: string) =>{
const abstractControl = group.get(key)
if(abstractControl instanceof FormGroup){
this.logValidationErrors(abstractControl)
} else {
this.formErrors[key] = '';
if(abstractControl && !abstractControl.valid){
for (const errorKey in abstractControl.errors) {
if (errorKey) {
this.formErrors[key];
}
}
}
if (abstractControl instanceof FormGroup) {
this.logValidationErrors(abstractControl);
}
if (abstractControl instanceof FormArray) {
for (const control of abstractControl.controls){
if (control instanceof FormGroup) {
this.logValidationErrors(control)
}
}
}
}
})
}
addSkillFormGroup(): FormGroup{
return this.fb.group({
project: ['', Validators.required],
process: ['', Validators.required],
hours: ['', Validators.required],
minutes: [''],
})
}
onl oadDataClick(): void{
this.logValidationErrors(this.employeeForm)
}
}
uj5u.com熱心網友回復：
這是嚴格的型別檢查并認為是employeeForm.get('skills')as any，這是正確的，因為您沒有為其指定型別。我建議您在其中指定型別的吸氣劑：
get skillArr() {
return this.employeeForm.get('skills') as FormArray
}
并在模板中使用它：
let skill of skillArr.controls
現在 Angular 可以判斷它是一個 formArray。您any也可以在模板中鍵入它，但由于您可以將其鍵入為 FormArray，我建議這樣做。這將是鍵入它的方式any：
let skill of $any(employeeForm.get('skills')).controls
當我在 FormArray 中有一個嵌套的 FormArray 時，我只會求助于這個，因為在那里使用 getter 是行不通的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/379930.html