Search code examples
angularfirebaseangularfire2ionic4

No value accessor for form control with unspecified name attribute for ngControl


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>


Solution

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

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