![](/img/trans.png)
[英]How can I dynamically create and patch the value of a select field on an Angular reactive form?
[英]How can I patch an image field in a reactive form in Angular?
我正在努力解决这个问题。 我有一个创建项目的表单,这个项目可以有一个缩略图。 为了上传图片,我使用了ngx-mat-file-input
库。 我创建上传如下:
component.html
:
<mat-form-field>
<ngx-mat-file-input #photo formControlName="photo" placeholder="Image" (change)="onAddImage($event)"></ngx-mat-file-input>
<button mat-icon-button matSuffix *ngIf="!photo.empty" (click)="photo.clear($event); ">
<mat-icon matSuffix>clear</mat-icon>
</button>
<mat-icon matSuffix *ngIf="photo.empty">photography</mat-icon>
<mat-error *ngIf="hasError('photo', 'maxContentSize')">
The total size must not exceed {{itemForm.get('photo')?.getError('maxContentSize').maxSize | byteFormat}} ({{itemForm.get('photo')?.getError('maxContentSize').actualSize
| byteFormat}}).
</mat-error>
</mat-form-field>
<div *ngIf="!photo.empty" style="float: left; margin: 5px">
<img [src]="imageSrc" *ngIf="imageSrc" style="max-height: 100px; max-width:100x">
</div>
然后我在我的 typescript: component.ts
中有这个方法:
// properties
readonly photoMaxSize = 2*2**20; // 2MB
imageSrc: string | undefined; // Used to preview image
itemForm: FormGroup;
// constructor
this.itemForm = new FormGroup({
photo: new FormControl(undefined, [FileValidator.maxContentSize(this.photoMaxSize)]),
name: new FormControl('', [Validators.required, Validators.maxLength(100)]),
});
// validation
hasError(controlName: string, errorName: string){
return this.itemForm.controls[controlName].hasError(errorName);
}
// create thumbnail when creating the form
onAddImage(event: any) {
const reader = new FileReader();
if(event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.imageSrc = reader.result as string;
this.itemForm.patchValue({
fileSource: reader.result
});
};
}
}
我的问题来了,它被发送到后端,然后作为 JSON 返回,其中包含一个 URL 到图像,所以我开始在我的表单中创建类似这样的东西来修补值:
patchFormOnEdit(id: number){
this.itemService.getItem(id).subscribe(
(res: Item) =>{
// Patch strings
this.itemForm.patchValue({
name: res.name,
});
// Thumbnail:
if (res.photo){
console.log("Setting thumbnail to " + res.photo);
this.imageSrc = res.photo;
this.itemForm.patchValue({
photo: res.photo,
});
}
}
);
}
但它已经崩溃了:
R TypeError: control.value.files is undefined
maxContentSize ngx-material-file-input.js:403
Angular 9
patchFormOnEdit XXXX.component.ts:140
RxJS 13
Angular 16
RxJS 18
patchFormOnEdit XXXX.component.ts:107
ngOnInit .component.ts:101
Angular 22
RxJS 5
Angular 22
ItemTableComponent_td_39_Template YYYY.component.html:129
Angular 11
RxJS 5
我的猜测是我不能 map 将 URL 转换为图书馆使用的 object。 我该如何解决这个问题?
我的目标是与我创建的相同,我可以在其中删除或更改项目,但使用已保存在后端的内容作为 src,而不是用户在创建时输入的内容:
我找到了一个解决方案,我不知道它是否是正确的方法,但至少是可行的。
我无法使用ngx-mat-file-input
来显示我从后端获得的图像,我不知道它是否可能,或者它是否只处理来自用户的本地文件。
所以我创建了一个 select 框来删除该项目:
component.ts
:
previousImageSrc: string | undefined; // Used to store previous image
deletePreviousImage: boolean | undefined = undefined; // Delete backend image on patch
...
...
// Patch Thumbnail:
if (res.photo){
this.imageSrc=res.photo;
this.previousImageSrc=res.photo;
this.deletePreviousImage = false;
}
...
...
// Add image using the nxg-mat-file-input
onAddImage(event: any) {
const reader = new FileReader();
if(event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.imageSrc = reader.result as string;
this.itemForm.patchValue({
fileSource: reader.result
});
};
this.deletePreviousImage = false;
}
}
// When the user removes an image display again what is in backend
onRemoveImage(){
if(this.previousImageSrc){
this.imageSrc = this.previousImageSrc;
this.deletePreviousImage = false;
}
}
然后更新 html 以包含此删除映像 function:
component.html
<!-- Photo -->
<div class="row-group">
<mat-form-field>
<ngx-mat-file-input #photo formControlName="photo" placeholder="Image" (change)="onAddImage($event)"></ngx-mat-file-input>
<button mat-icon-button matSuffix *ngIf="!photo.empty" (click)="photo.clear($event); onRemoveImage()">
<mat-icon matSuffix>clear</mat-icon>
</button>
<mat-icon matSuffix *ngIf="photo.empty">photography</mat-icon>
<mat-error *ngIf="hasError('photo', 'maxContentSize')">
The total size must not exceed {{itemForm.get('photo')?.getError('maxContentSize').maxSize | byteFormat}} ({{itemForm.get('photo')?.getError('maxContentSize').actualSize
| byteFormat}}).
</mat-error>
</mat-form-field>
<div *ngIf="imageSrc" style="float: left; margin: 5px">
<!-- Display Preview -->
<img [src]="imageSrc" alt='Item image' *ngIf="imageSrc" style="max-height: 100px; max-width:100x">
<!-- deletePreviousImage -->
<div *ngIf="deletePreviousImage !== undefined && photo.empty">
<br>
<mat-checkbox
class="checkbox"
formControlName="deletePreviousImage"
id="item:edit:deletePreviousImage"
>
Delete image
</mat-checkbox>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.