出于一些奇怪的原因,在线没有任何教程或代码示例显示如何使用Angular2 Reactive表单,而不仅仅是简单的输入或选择下拉列表.
我需要创建一个表单让用户选择他们的头像.(图像文件)
以下不起作用.(即"头像"属性从不显示任何值更改.)
profile.component.html:
<form [formGroup]="profileForm" novalidate>
<div class="row">
<div class="col-md-4 ">
<img src="{{imgUrl}}uploads/avatars/{{getUserAvatar}}" style="width:150px; height:150px;float:left;border-radius:50%;margin-right:25px;margin-left:10px;">
<div class="form-group">
<label>Update Profile Image</label>
<input class="form-control" type="file" formControlName="avatar">
</div>
</div>
<div class="col-md-8 ">
<div class="form-group">
<label >Firstname:
<input class="form-control" formControlName="firstname">
</label>
</div>
<div class="form-group">
<label >Lastname:
<input class="form-control" formControlName="lastname">
</label>
</div>
<div class="form-group">
<label >Email:
<input class="form-control" formControlName="email">
</label>
</div>
<div class="form-group">
<label >Password:
<input class="form-control" type="password" formControlName="password">
</label>
</div>
</div>
</div>
</form>
<p>Form value: {{ profileForm.value | json }}</p>
<p>Form status: …我正在编写一个带有文件选择器的组件,该文件选择器将文件上传到我们的CDN.我正在尝试在此组件上添加一个反应形式以验证图像输入,因此我可以检查文件名/扩展名等,并将其包装在一个表单中,这样我就可以保持Angulars验证的好处.
我的组件HTML是
<form class="mt-4" [formGroup]="form">
<div class="form-group form-inline">
<label class="btn btn-secondary btn-file">Browse
<input name="file" type="file" (change)="onChange($event)" formControlName="imageInput"
</label>
<p *ngIf="file" class="pl-4 align-middle mb-0">{{file.name}}</p>
</div>
<button type="button" class="btn btn-primary">Upload</button>
</form>
我的组件代码是
onChange(event: EventTarget) {
// file picker code
this.form = this.formBuilder.group({
imageInput: [this.file.name, CustomValidators.imageValidator]
});
}
在CustomValidars.imageValidator刚刚记录在一分钟输入.
加载组件时,错误消息显示为 ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
基本上,我想在我的反应形式中使用文件输入,所以我可以验证文件名.