Как включить управление загрузкой файлов в реактивную форму Angular2?

По какой-то странной причине в учебнике или примерах кода нет примеров, показывающих, как использовать Angular2 реактивные формы с чем-то большим, чем простой ввод или выбор выпадающих списков.

Мне нужно создать форму, чтобы пользователи могли выбрать свой аватар. (Файл изображения)

Не работает следующее. (т.е. свойство "Аватар" никогда не показывает никаких изменений значений.)

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: {{ profileForm.status | json }}</p>

Ответы

Ответ 2

Вы можете использовать приведенный ниже метод для загрузки изображения в любой форме.

Представьте один способ изменения для вашего контроля.

<input class="form-control" type="file" name="avatar" (change)="imageUpload($event)">
<img [src]="imageUrl" />

Добавьте логику в свой класс ниже.

 // Declare the variable. 
  imageUrl: any;

   //method definition in your class 
    imageUpload(e) {
        let reader = new FileReader();
        //get the selected file from event
        let file = e.target.files[0];
        reader.onloadend = () => {
          //Assign the result to variable for setting the src of image element
          this.imageUrl = reader.result;
        }
        reader.readAsDataURL(file);
      }
    }

После загрузки изображения вы можете использовать this.imageUrl, чтобы обновить вашу модель формы. Для загрузки изображения или файла на сервер вы можете воспользоваться ссылкой из приведенной ниже ссылки.

Как загрузить файл в Angular2

Сообщите мне, работает ли это решение для вас.

Ответ 3

Я немного опаздываю на это, но для тех, кто может приехать сюда в поисках того же решения - Это мой вход для доступа к файлам, который можно использовать с формами, управляемыми с помощью React или Template. Демо здесь.

Там есть дополнительная опция проверки, которая может использоваться для проверки размеров изображения и размера файла, расширения, типа, который по умолчанию отключен.

npm i file-input-accessor и добавьте модуль в ваш импорт AppModule:

import {BrowserModule} from '@angular/platform-browser';
import {FileInputAccessorModule} from "file-input-accessor";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FileInputAccessorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

Затем используйте входной файл, как и любой другой вход:

<!--Reactive Forms-->
<input type="file" multiple [formControl]="someFileControl" />
<input type="file" multiple formControlName="someFileControl" />

<!--Template-driven-->
<input type="file" name="file-input" multiple [(ngModel)]="fileList" />

Вы можете подписаться на свойство valueChanges, как и на любое другое реактивное управление.