Nsryjdtyk

i want add username field in firebase, as all said we cant add direct username field in firebase. So i am trying to add via update method. Here i got code with this if i add value in code that way working but i don't know how can i add value via input.

file.ts

this.fAuth.auth.onAuthStateChanged(function(user) {



                if (user) {



                   // Updates the user attributes:



                  user.updateProfile({ // <-- Update Method here



                    displayName: "Goku",

                    photoURL: "https://example.com/jane-q-user/profile.jpg"



                  }).then(function() {



                    // Profile updated successfully!

                    //  "NEW USER NAME"



                    var displayName = user.displayName;

                    // "https://example.com/jane-q-user/profile.jpg"

                    var photoURL = user.photoURL;



                  }, function(error) {

                    // An error happened.

                  });     



                }

    });

file.html

<form [formGroup]="myForm">

    <ion-list>



      <ion-item>

        <ion-label floating>Username</ion-label>

        <ion-input formControlName="displayName" type="text" [(ngModel)]="user.displayName"></ion-input>

      </ion-item>

</form>



</ion-content>

please help me...

To take the value from the html, try the following:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">

 <ion-list>

  <ion-item>

    <ion-label floating>Username</ion-label>

    <ion-input formControlName="displayName" type="text" [(ngModel)]="displayName"></ion-input>

  </ion-item>

  <ion-item>

    <button ion-button type="submit" [disabled]="myForm.invalid">Submit</button>

  </ion-item>

 </ion-list>

</form>

Then in the .ts, do the following:

ngOnInit()

{

 this.myForm = this.fb.group({

  displayName : ['', Validators.required],

 });

}



onSubmit()

{

   if(this.myForm.valid)

   {

     this.displayName = this.myForm.get('displayName').value;

     console.log(this.displayName);

   }

} 

this.displayName will contain the value of the ion-input, do not forget to declare the property displayName under the class declaration.