Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field...
Hello im sitting here with a project i cannot find the error or what iam doing wrong.
Iam using angular 6 and firebase/firestore
My problem is when i want to create a user with email and password it works fine but i then added more fields like firstname, lastname and so on.
Auth.service.ts
My auth service have the interface and the to functions showed below here. i tested the creating user with only email and password and that worked fine.
in my firebase i have activated the auth with email/password and i created a collection users with a document users and added all the fields firstName,
lastName and so on.
interface User {
uid: string;
email?: string;
photoURL?: string;
displayName?: string;
firstName?: string;
lastName?: string;
address?: string;
zipCode?: string;
city?: string;
phoneNumber?: string;
}
emailSignUp(email: string, password: string) {
return this.afAuth.auth
.createUserWithEmailAndPassword(email, password)
.then(credential => {
this.notify.update('Welcome new user!', 'success');
return this.updateUserData(credential.user); // if using firestore
})
.catch(error => this.handleError(error));
}
private updateUserData(user) {
// Sets user data to firestore on login
const userRef: AngularFirestoreDocument<any> =
this.afs.doc(`users/${user.uid}`);
const data: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
firstName: user.firstName,
lastName: user.lastName,
address: user.address,
zipCode: user.zipCode,
city: user.city,
phoneNumber: user.phoneNumber
}
return userRef.set(data, { merge: true })
}
User-form.component.html
This is my component where i have my form for creating a new user.
<form [formGroup]="userForm" *ngIf="newUser" (ngSubmit)="signup()">
<h1>Log ind / Opret ny profil</h1>
<br>
<h3>Har du allerede en bruger så tryk på log ind</h3>
<p class="btn btn-primary" (click)="toggleForm()">Log ind</p>
<h3>Opret ny profil</h3>
<!--<p class="button is-small" (click)="toggleForm()">Already Registered?
</p>-->
<hr>
<label for="firstName">Fornavn</label>
<input type="text" class="input" formControlName="firstName"
name="firstName" required >
<label for="lastName">Efternavn</label>
<input type="text" class="input" formControlName="lastName" name="lastName"
required>
<label for="telefonnummer">Telefonnummer</label>
<input type="tel" class="input" formControlName="phoneNumber"
name="telefonnummer" required>
<label for="adresse">Adresse</label>
<input type="text" class="input" formControlName="address" name="adresse"
required>
<label for="postnummer">Postnummer</label>
<input type="number" class="input" formControlName="zipCode"
name="postnummer" required>
<label for="by">By</label>
<input type="text" class="input" formControlName="city" name="by" required>
<label for="email">Email</label>
<input type="email" class="input" formControlName="email" name="email"
required autocomplete="new-password">
<div *ngIf="formErrors.email" class="notification is-danger">
{{ formErrors.email }}
</div>
<label for="password">Password</label>
<input type="password" class="input" formControlName="password"
name="password" required>
<div *ngIf="formErrors.password" class="notification is-danger">
{{ formErrors.password }}
</div>
<!--
<label>
<input type="checkbox" class="checkbox" required>Service & Betingelser
</label>
-->
<div *ngIf="userForm.valid" class="notification is-success">Form is
valid</div>
<button type="submit" class="btn btn-primary"
[disabled]="!userForm.valid">Opret Profil</button>
</form>
javascript angular firebase google-cloud-firestore
add a comment |
Hello im sitting here with a project i cannot find the error or what iam doing wrong.
Iam using angular 6 and firebase/firestore
My problem is when i want to create a user with email and password it works fine but i then added more fields like firstname, lastname and so on.
Auth.service.ts
My auth service have the interface and the to functions showed below here. i tested the creating user with only email and password and that worked fine.
in my firebase i have activated the auth with email/password and i created a collection users with a document users and added all the fields firstName,
lastName and so on.
interface User {
uid: string;
email?: string;
photoURL?: string;
displayName?: string;
firstName?: string;
lastName?: string;
address?: string;
zipCode?: string;
city?: string;
phoneNumber?: string;
}
emailSignUp(email: string, password: string) {
return this.afAuth.auth
.createUserWithEmailAndPassword(email, password)
.then(credential => {
this.notify.update('Welcome new user!', 'success');
return this.updateUserData(credential.user); // if using firestore
})
.catch(error => this.handleError(error));
}
private updateUserData(user) {
// Sets user data to firestore on login
const userRef: AngularFirestoreDocument<any> =
this.afs.doc(`users/${user.uid}`);
const data: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
firstName: user.firstName,
lastName: user.lastName,
address: user.address,
zipCode: user.zipCode,
city: user.city,
phoneNumber: user.phoneNumber
}
return userRef.set(data, { merge: true })
}
User-form.component.html
This is my component where i have my form for creating a new user.
<form [formGroup]="userForm" *ngIf="newUser" (ngSubmit)="signup()">
<h1>Log ind / Opret ny profil</h1>
<br>
<h3>Har du allerede en bruger så tryk på log ind</h3>
<p class="btn btn-primary" (click)="toggleForm()">Log ind</p>
<h3>Opret ny profil</h3>
<!--<p class="button is-small" (click)="toggleForm()">Already Registered?
</p>-->
<hr>
<label for="firstName">Fornavn</label>
<input type="text" class="input" formControlName="firstName"
name="firstName" required >
<label for="lastName">Efternavn</label>
<input type="text" class="input" formControlName="lastName" name="lastName"
required>
<label for="telefonnummer">Telefonnummer</label>
<input type="tel" class="input" formControlName="phoneNumber"
name="telefonnummer" required>
<label for="adresse">Adresse</label>
<input type="text" class="input" formControlName="address" name="adresse"
required>
<label for="postnummer">Postnummer</label>
<input type="number" class="input" formControlName="zipCode"
name="postnummer" required>
<label for="by">By</label>
<input type="text" class="input" formControlName="city" name="by" required>
<label for="email">Email</label>
<input type="email" class="input" formControlName="email" name="email"
required autocomplete="new-password">
<div *ngIf="formErrors.email" class="notification is-danger">
{{ formErrors.email }}
</div>
<label for="password">Password</label>
<input type="password" class="input" formControlName="password"
name="password" required>
<div *ngIf="formErrors.password" class="notification is-danger">
{{ formErrors.password }}
</div>
<!--
<label>
<input type="checkbox" class="checkbox" required>Service & Betingelser
</label>
-->
<div *ngIf="userForm.valid" class="notification is-success">Form is
valid</div>
<button type="submit" class="btn btn-primary"
[disabled]="!userForm.valid">Opret Profil</button>
</form>
javascript angular firebase google-cloud-firestore
In updateUserData() method, console.log to see what user looks like. Is firstName there?
– rrd
Nov 22 '18 at 12:06
I have tryed to remove most of the input fields to test with only 1 field (more easy to check) But i get a null in my displayname field {uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2", email: "test33@gmail.com", displayName: null} displayName: null email: "test33@gmail.com" uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2"
– Niclas Krabbe Rosenby
Nov 23 '18 at 11:20
add a comment |
Hello im sitting here with a project i cannot find the error or what iam doing wrong.
Iam using angular 6 and firebase/firestore
My problem is when i want to create a user with email and password it works fine but i then added more fields like firstname, lastname and so on.
Auth.service.ts
My auth service have the interface and the to functions showed below here. i tested the creating user with only email and password and that worked fine.
in my firebase i have activated the auth with email/password and i created a collection users with a document users and added all the fields firstName,
lastName and so on.
interface User {
uid: string;
email?: string;
photoURL?: string;
displayName?: string;
firstName?: string;
lastName?: string;
address?: string;
zipCode?: string;
city?: string;
phoneNumber?: string;
}
emailSignUp(email: string, password: string) {
return this.afAuth.auth
.createUserWithEmailAndPassword(email, password)
.then(credential => {
this.notify.update('Welcome new user!', 'success');
return this.updateUserData(credential.user); // if using firestore
})
.catch(error => this.handleError(error));
}
private updateUserData(user) {
// Sets user data to firestore on login
const userRef: AngularFirestoreDocument<any> =
this.afs.doc(`users/${user.uid}`);
const data: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
firstName: user.firstName,
lastName: user.lastName,
address: user.address,
zipCode: user.zipCode,
city: user.city,
phoneNumber: user.phoneNumber
}
return userRef.set(data, { merge: true })
}
User-form.component.html
This is my component where i have my form for creating a new user.
<form [formGroup]="userForm" *ngIf="newUser" (ngSubmit)="signup()">
<h1>Log ind / Opret ny profil</h1>
<br>
<h3>Har du allerede en bruger så tryk på log ind</h3>
<p class="btn btn-primary" (click)="toggleForm()">Log ind</p>
<h3>Opret ny profil</h3>
<!--<p class="button is-small" (click)="toggleForm()">Already Registered?
</p>-->
<hr>
<label for="firstName">Fornavn</label>
<input type="text" class="input" formControlName="firstName"
name="firstName" required >
<label for="lastName">Efternavn</label>
<input type="text" class="input" formControlName="lastName" name="lastName"
required>
<label for="telefonnummer">Telefonnummer</label>
<input type="tel" class="input" formControlName="phoneNumber"
name="telefonnummer" required>
<label for="adresse">Adresse</label>
<input type="text" class="input" formControlName="address" name="adresse"
required>
<label for="postnummer">Postnummer</label>
<input type="number" class="input" formControlName="zipCode"
name="postnummer" required>
<label for="by">By</label>
<input type="text" class="input" formControlName="city" name="by" required>
<label for="email">Email</label>
<input type="email" class="input" formControlName="email" name="email"
required autocomplete="new-password">
<div *ngIf="formErrors.email" class="notification is-danger">
{{ formErrors.email }}
</div>
<label for="password">Password</label>
<input type="password" class="input" formControlName="password"
name="password" required>
<div *ngIf="formErrors.password" class="notification is-danger">
{{ formErrors.password }}
</div>
<!--
<label>
<input type="checkbox" class="checkbox" required>Service & Betingelser
</label>
-->
<div *ngIf="userForm.valid" class="notification is-success">Form is
valid</div>
<button type="submit" class="btn btn-primary"
[disabled]="!userForm.valid">Opret Profil</button>
</form>
javascript angular firebase google-cloud-firestore
Hello im sitting here with a project i cannot find the error or what iam doing wrong.
Iam using angular 6 and firebase/firestore
My problem is when i want to create a user with email and password it works fine but i then added more fields like firstname, lastname and so on.
Auth.service.ts
My auth service have the interface and the to functions showed below here. i tested the creating user with only email and password and that worked fine.
in my firebase i have activated the auth with email/password and i created a collection users with a document users and added all the fields firstName,
lastName and so on.
interface User {
uid: string;
email?: string;
photoURL?: string;
displayName?: string;
firstName?: string;
lastName?: string;
address?: string;
zipCode?: string;
city?: string;
phoneNumber?: string;
}
emailSignUp(email: string, password: string) {
return this.afAuth.auth
.createUserWithEmailAndPassword(email, password)
.then(credential => {
this.notify.update('Welcome new user!', 'success');
return this.updateUserData(credential.user); // if using firestore
})
.catch(error => this.handleError(error));
}
private updateUserData(user) {
// Sets user data to firestore on login
const userRef: AngularFirestoreDocument<any> =
this.afs.doc(`users/${user.uid}`);
const data: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
firstName: user.firstName,
lastName: user.lastName,
address: user.address,
zipCode: user.zipCode,
city: user.city,
phoneNumber: user.phoneNumber
}
return userRef.set(data, { merge: true })
}
User-form.component.html
This is my component where i have my form for creating a new user.
<form [formGroup]="userForm" *ngIf="newUser" (ngSubmit)="signup()">
<h1>Log ind / Opret ny profil</h1>
<br>
<h3>Har du allerede en bruger så tryk på log ind</h3>
<p class="btn btn-primary" (click)="toggleForm()">Log ind</p>
<h3>Opret ny profil</h3>
<!--<p class="button is-small" (click)="toggleForm()">Already Registered?
</p>-->
<hr>
<label for="firstName">Fornavn</label>
<input type="text" class="input" formControlName="firstName"
name="firstName" required >
<label for="lastName">Efternavn</label>
<input type="text" class="input" formControlName="lastName" name="lastName"
required>
<label for="telefonnummer">Telefonnummer</label>
<input type="tel" class="input" formControlName="phoneNumber"
name="telefonnummer" required>
<label for="adresse">Adresse</label>
<input type="text" class="input" formControlName="address" name="adresse"
required>
<label for="postnummer">Postnummer</label>
<input type="number" class="input" formControlName="zipCode"
name="postnummer" required>
<label for="by">By</label>
<input type="text" class="input" formControlName="city" name="by" required>
<label for="email">Email</label>
<input type="email" class="input" formControlName="email" name="email"
required autocomplete="new-password">
<div *ngIf="formErrors.email" class="notification is-danger">
{{ formErrors.email }}
</div>
<label for="password">Password</label>
<input type="password" class="input" formControlName="password"
name="password" required>
<div *ngIf="formErrors.password" class="notification is-danger">
{{ formErrors.password }}
</div>
<!--
<label>
<input type="checkbox" class="checkbox" required>Service & Betingelser
</label>
-->
<div *ngIf="userForm.valid" class="notification is-success">Form is
valid</div>
<button type="submit" class="btn btn-primary"
[disabled]="!userForm.valid">Opret Profil</button>
</form>
javascript angular firebase google-cloud-firestore
javascript angular firebase google-cloud-firestore
edited Nov 22 '18 at 15:02
Frank van Puffelen
233k29380406
233k29380406
asked Nov 22 '18 at 11:54
Niclas Krabbe RosenbyNiclas Krabbe Rosenby
72
72
In updateUserData() method, console.log to see what user looks like. Is firstName there?
– rrd
Nov 22 '18 at 12:06
I have tryed to remove most of the input fields to test with only 1 field (more easy to check) But i get a null in my displayname field {uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2", email: "test33@gmail.com", displayName: null} displayName: null email: "test33@gmail.com" uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2"
– Niclas Krabbe Rosenby
Nov 23 '18 at 11:20
add a comment |
In updateUserData() method, console.log to see what user looks like. Is firstName there?
– rrd
Nov 22 '18 at 12:06
I have tryed to remove most of the input fields to test with only 1 field (more easy to check) But i get a null in my displayname field {uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2", email: "test33@gmail.com", displayName: null} displayName: null email: "test33@gmail.com" uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2"
– Niclas Krabbe Rosenby
Nov 23 '18 at 11:20
In updateUserData() method, console.log to see what user looks like. Is firstName there?
– rrd
Nov 22 '18 at 12:06
In updateUserData() method, console.log to see what user looks like. Is firstName there?
– rrd
Nov 22 '18 at 12:06
I have tryed to remove most of the input fields to test with only 1 field (more easy to check) But i get a null in my displayname field {uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2", email: "test33@gmail.com", displayName: null} displayName: null email: "test33@gmail.com" uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2"
– Niclas Krabbe Rosenby
Nov 23 '18 at 11:20
I have tryed to remove most of the input fields to test with only 1 field (more easy to check) But i get a null in my displayname field {uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2", email: "test33@gmail.com", displayName: null} displayName: null email: "test33@gmail.com" uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2"
– Niclas Krabbe Rosenby
Nov 23 '18 at 11:20
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430476%2ffunction-documentreference-set-called-with-invalid-data-unsupported-field-val%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430476%2ffunction-documentreference-set-called-with-invalid-data-unsupported-field-val%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
In updateUserData() method, console.log to see what user looks like. Is firstName there?
– rrd
Nov 22 '18 at 12:06
I have tryed to remove most of the input fields to test with only 1 field (more easy to check) But i get a null in my displayname field {uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2", email: "test33@gmail.com", displayName: null} displayName: null email: "test33@gmail.com" uid: "rpa4lSZb9Wam1uw7lwu3fwdclLR2"
– Niclas Krabbe Rosenby
Nov 23 '18 at 11:20