У меня есть диалоговое окно материала, которое открывается с помощью кнопки редактирования таблицы данных.
Я получаю неопределенное значение для "ressursId", которое должно получить его значение из метода patchValue, но оно всегда тоже не определено.
Кажется, есть проблема с вызовом pathcValue() и одновременным использованием [displayWith]="displayFn", так как дисплей перезаписывает значение patchValue?Я не уверен.
Итак, что не работает, так это то, что, когда я набираю ввод, даже если я получаю отфильтрованные результаты в раскрывающемся списке, я должен отображать начальное значение из таблицы (если оно существует, оно не всегдасуществует, когда диалог открыт).
Мне также важнее получить ressursId выбранного значения, потому что без него я не могу сделать запрос PUT для обновления данных.
Что я делаю не так?Документы Angular слишком просты!
Частичная форма component.html
<form class="mat-dialog-content" (ngSubmit)="submit()" #formControl="ngForm" [formGroup]="patchForm">
<div class="form">
<mat-form-field>
<input
matInput
formControlName="selectedRessurs"
[matAutocomplete]="auto"
placeholder="Ressurs"
[formControl]="ressursControl"
>
<mat-autocomplete #auto="matAutocomplete" name="selectedRessurs" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.navn }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
и мой component.ts
export class PatchDialogComponent implements OnInit {
functiongGroup: FunksjonsGruppe;
ressurs: Ressurser;
@Input() prosjektFunksjon: ProsjektFunksjon;
@Input() ressurser: Ressurser[];
@Input() prosjFunk: ProsjektFunksjon[];
// selectedFunksjon: any;
selectedRessurs: number;
selectedRessursId: number;
ressursId: number;
prosjektId: number;
selectedRowId: any;
funksjonsgruppe: any;
fetchedProsjektFunksjon: ProsjektFunksjon;
constructor(public dialogRef: MatDialogRef<PatchDialogComponent>,
private projectService: ProjectService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
}
formControl = new FormControl('', [
// Validators.required
// Validators.email,
]);
ressursControl = new FormControl();
// options: Ressurser[];
filteredOptions: Observable<Ressurser[]>;
patchForm = new FormGroup({
selectedRessurs: new FormControl(),
rollenavn: new FormControl(),
estimertAntallTimer: new FormControl()
});
getErrorMessage() {
return this.formControl.hasError('required') ? 'Required field' :
this.formControl.hasError('email') ? 'Not a valid email' :
'';
}
submit() {
// empty stuff
}
onNoClick(): void {
this.dialogRef.close();
}
public confirmPut(): void {
console.log(' 99: ', this.data);
this.prosjektFunksjon = {
prosjektFunksjonId: this.fetchedProsjektFunksjon.prosjektFunksjonId,
estimertAntallTimer: this.patchForm.value['estimertAntallTimer'],
rollenavn: this.patchForm.value['rollenavn'],
funksjonId: null,
funksjonNavn: null,
subGruppe: null,
subGruppeId: null,
gruppe: null,
gruppeId: null,
ressursId: this.patchForm.value.selectedRessurs['ressursId'],
ressursNavn: null
};
console.log('data 101: ', this.data, '\n', ' ProsjektFunksjonsID: ', this.fetchedProsjektFunksjon.prosjektFunksjonId, '\n', ' prosjektFunksjon: ', this.prosjektFunksjon, );
this.projectService.updateProjectFunction(this.prosjektId, this.selectedRowId, this.prosjektFunksjon).subscribe();
}
displayFn(user?: Ressurser): string | undefined {
return user ? user.navn : '';
}
private _filter(navn: string): Ressurser[] {
const filterValue = navn.toLowerCase();
return this.ressurser.filter(option => option.navn.toLowerCase().indexOf(filterValue) === 0);
// return this.ressurser.filter(option => option.ressursId.indexOf(filterValue) === 0);
}
ngOnInit(): void {
this.data = this.dialogRef.componentInstance;
this.projectService.getResources().subscribe(r => {
this.ressurser = r;
this.ressurser = (this.ressurser || []).sort((a: Ressurser, b: Ressurser) => a.navn.localeCompare(b.navn));
});
this.projectService.getProjectFunction(this.prosjektId, this.selectedRowId).subscribe(gpf => {
// console.log('gpf: ', gpf);
this.fetchedProsjektFunksjon = gpf;
console.log('onit: ', this.fetchedProsjektFunksjon);
// patchFrom expects an object matching to the formgroup, field by field.
this.patchForm.patchValue({
selectedRessurs: this.fetchedProsjektFunksjon['ressursNavn'],
rollenavn: this.fetchedProsjektFunksjon['rollenavn'],
estimertAntallTimer: this.fetchedProsjektFunksjon['estimertAntallTimer']
});
console.log('After patchValue. fetchedProsjFunk: ', this.fetchedProsjektFunksjon);
});
this.filteredOptions = this.ressursControl.valueChanges
.pipe(
startWith<string | Ressurser>(''),
map(value => typeof value === 'string' ? value : value.navn),
map(navn => navn ? this._filter(navn) : null)
);
} // @oninit
}