I'm creating an Ionic social app. You upload a pic to a firebase backend. I'm getting the following error message when go to the profile page: No value accessor for form control with unspecified name attribute.
So when the page loads, if there's no download url from firebase it should return the image location to use the default button image. If there's an image in firebase for photo0 then it should use that url. The NGModel should dynamically change whenever a user uploads or deletes the pic. But when I load that page I get the no value accessor error. Not sure what I'm doing wrong here.
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/user/auth.service';
import { ImageService } from '../../services/image.service';
import { Router } from '@angular/router';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
public photo0: string;
constructor(private router: Router,
private authService: AuthService,
private imageService: ImageService,
private afAuth: AngularFireAuth) {
this.afAuth.authState.subscribe(user => {
this.userId = user.uid
console.log('constructoruser', this.userId);
});
}
ngOnInit() {
this.firestore.ref(`/Photos/${ this.userId }/`).child('photo0').getDownloadURL().then((url) => {
this.photo0 = url;
}).catch((error) => {
console.log(error.message);
this.photo0 = 'assets/img/add-an-image.png';
console.log(this.photo0);
});
}
<div>
<div [(ngModel)]="photo0">
<img src="photo0" (click)="UploadPic0('photo0')"/>
</div>
</div>
Got rid of the error by removing ngModule and just using the following:
<div>
<img [src]="photo0" (click)="UploadPic0('photo0')"/>
</div>