Usando angular 2 beta, parece que no puedo hacer que un <input type="file"> funcione.
Al usar el diagnóstico, puedo ver enlaces bidireccionales para otros type , como text .
<form> {{diagnostic}} <div class="form-group"> <label for="fileupload">Upload</label> <input type="file" class="form-control" [(ngModel)]="model.fileupload"> </div> </form>En mi archivo TypeScript, tengo la siguiente línea de diagnóstico:
get diagnostic() { return JSON.stringify(this.model); } ¿Será que es el tema de no ser JSON? El valor es null .
Realmente no puedo verificar el valor de la input . Aunque el texto junto a "Elegir archivo ..." se actualice, no puedo ver las diferencias en el DOM por alguna razón.
Creo que no es compatible. Si echa un vistazo a esta directiva DefaultValueAccessor (consulte https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts#L23 ). Verá que el valor utilizado para actualizar el elemento enlazado es $event.target.value .
Esto no se aplica en el caso de entradas con tipo de file ya que en su lugar se puede acceder al objeto de archivo $event.srcElement.files .
Para más detalles, puede echar un vistazo a este plunkr: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info :
@Component({ selector: 'my-app', template: ` <div> <input type="file" (change)="onChange($event)"/> </div> `, providers: [ UploadService ] }) export class AppComponent { onChange(event) { var files = event.srcElement.files; console.log(files); } }@Component({ selector: 'my-app', template: ` <div> <input name="file" type="file" (change)="onChange($event)"/> </div> `, providers: [ UploadService ] }) export class AppComponent { file: File; onChange(event: EventTarget) { let eventObj: MSInputMethodContext = <MSInputMethodContext> event; let target: HTMLInputElement = <HTMLInputElement> eventObj.target; let files: FileList = target.files; this.file = files[0]; console.log(this.file); } doAnythingWithFile() { } }Hay una forma ligeramente mejor de acceder a los archivos adjuntos. Podría usar la variable de referencia de plantilla para obtener una instancia del elemento de entrada.
Aquí hay un ejemplo basado en la primera respuesta:
@Component({ selector: 'my-app', template: ` <div> <input type="file" #file (change)="onChange(file.files)"/> </div> `, providers: [ UploadService ] }) export class AppComponent { onChange(files) { console.log(files); } }Aquí hay una aplicación de ejemplo para demostrar esto en acción.
Las variables de referencia de plantilla pueden ser útiles, por ejemplo, puede acceder a ellas a través de @ViewChild directamente en el controlador.