In my project, I am utilizing Angular 8 to extract data from a radio input. However, when I transmit this data to Node.js and then to a MongoDB database, it is not being properly registered. The entry in the database collection appears as follows:
"__v" : 0
The data output sent from Angular is: { type: administrator }, but what I actually want to store in the database is just the word adminstrator. The Node.js console displays an error due to receiving an object instead of the expected string value.
Here is the Angular template code:
<br>
<div class="w3-panel w3-border w3-margin" style="width: 500px; height: 550px">
<label class="w3-text-blue"><h2>New User</h2></label>
<label class="w3-text-blue"><b>Name and Last Name</b></label><br>
<input type="text" class="w3-input w3-border" [(ngModel)]="name" ><br>
<label class="w3-text-blue"><b>User</b></label><br>
<input type="text" class="w3-input w3-border" [(ngModel)]="user"><br>
<label class="w3-text-blue"><b>Password</b></label><br>
<input type="password" class="w3-input w3-border" [(ngModel)]="password"><br>
<label class="w3-text-blue"><b>Confirm Password</b></label><br>
<input type="password" class="w3-input w3-border" [(ngModel)]="confirm"><br>
<label class="w3-text-blue"><b>Type of User</b></label><br>
<form #myForm="ngForm" (submit)="sendRadio(myForm.value)" >
<input id="administrator" type="radio" name="type" class="w3-radio" value="administrator" ngModel>
<label for="administrador">Administrator</label> <br>
<input id="normal" type="radio" name="type" class="w3-radio" value="normal" ngModel>
<label for="normal">Moderator</label>
<br><br>
<button type="submit" (click)="createUser(user, password, name)" class="w3-button w3-round-xxlarge w3-green">Create</button>
<button class="w3-button w3-round-xxlarge w3-red">Clean Fields</button>
</form>
</div>
The TypeScript file for the component:
import { Component, OnInit } from '@angular/core';
import { PersonService } from '../_services/person.service';
@Component({
selector: 'app-create-user',
templateUrl: './create-user.component.html',
styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit {
user: any;
password: any;
confirm: any;
name: any;
type: string;
constructor(private ps: PersonService) { }
ngOnInit() {
}
sendRadio(value: any) {
this.type = value;
console.log(this.type); // <--- this outputs { type: administrator }
}
createUser(userU, userPassword, userName) {
if (this.password === this.confirm) {
if (this.password.length > 0 && this.confirm.length > 0) {
this.ps.createUser(userU, userPassword, userName, this.type);
} else {
console.log('Password has to match and be completed');
}
}else {
console.log('Password does not match');
}
}
}
The service used to send the data (PersonService):
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class PersonService {
uri = 'http://localhost:3000';
constructor(private http: HttpClient) { }
createUser(userU, userPassword, userName, userType: string) {
const obj = {
user: userU,
password: userPassword,
name: userName,
type: userType
};
this.http.post(`${this.uri}/createUser`, obj)
.subscribe(res => console.log('User has been created'));
}