相关疑难解决方法(0)

如何在Angular2反应形式中包含文件上传控件?

出于一些奇怪的原因,在线没有任何教程或代码示例显示如何使用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: …
Run Code Online (Sandbox Code Playgroud)

file-upload angular2-forms

26
推荐指数
3
解决办法
4万
查看次数

标签 统计

angular2-forms ×1

file-upload ×1