没有用于ngControl的未指定名称属性的表单控件的值访问器

Question

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> 

Answer 1

you can try with:

    <div>
        <div *ngIf="photo0 != ''">
            <img [src]="photo0" (click)="UploadPic0('photo0')"/>
        </div>      
    </div>

Answer 2

the tag "src" must to receive a component value. You can use [src]="photo0" or src="{{photo0}}" inside of your img tag.

Answer 3

Got rid of the error by removing ngModule and just using the following:

            <div>
                <img [src]="photo0" (click)="UploadPic0('photo0')"/>
            </div>