Многопользовательское приложение MEAN 2. Форма для создания 2 разных моделей

В своем стремлении изучить стек MEAN я создаю небольшое многопользовательское приложение и изо всех сил пытаюсь зарегистрировать всех своих пользователей / арендаторов. Бэкэнд отсортирован, я считаю, что просто не могу понять, как получить angular, чтобы играть в мяч.

Поток... Пользователь регистрирует новую учетную запись, которая одновременно создает нового арендатора. Вот так...

var express = require('express');
var router = express.Router();
var bcrypt = require('bcryptjs');

var Tenant = require('../models/tenant');
var User = require('../models/user');

router.post('/', function (req, res, next) {

  var tenant = new Tenant({
    name: req.body.name
  });

  tenant.save(function(err, tenant) {
    Tenant.findById(tenant._id, function(err, tenant) {
      var user = new User({
        first_name: req.body.first_name,
        last_name: req.body.last_name,
        email: req.body.email,
        password: bcrypt.hashSync(req.body.password, 10),
        active: req.body.active,
        tenant: tenant
      })
      user.save(function (err, user) {
        if (err) {
          return res.status(500).json({
            title: 'An error has occured',
            error: err
          });
        }
        res.status(201).json({
          message: 'User created',
          obj: user
        });
      })

    });
  });

 // tenant.findByIdAndUpdate(tenant._id, {owner: user._id});

});

module.exports = router;

Это, по большей части, работает так, как задумано. По крайней мере, при тестировании с почтальоном.

В angular мой компонент регистрации (в рабочем состоянии до того, как я попытался представить арендаторов) выглядит так:

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {Router} from "@angular/router";
import {AuthService} from "../auth.service";
import {User} from "../user.model";
import {Tenant} from "../tenant.model";

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit{
  myForm: FormGroup;

  constructor(private router: Router, private authService: AuthService) {}

  onSubmit() {
    const user = new User(
      this.myForm.value.first_name,
      this.myForm.value.last_name,
      this.myForm.value.email,
      this.myForm.value.password
    );
    this.authService.signup(user)
      .subscribe(
        data => console.log(data),
        error => console.error(error)
      );
    this.router.navigate(['/signup/success/' + this.myForm.value.email]);
  }

  ngOnInit() {
    this.myForm = new FormGroup({
      coName: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required),
      active: new FormControl(true, Validators.required)
    });
  }

}

и мой AuthService (снова в рабочем состоянии, прежде чем я попытался представить арендаторов)...

import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import 'rxjs/Rx';
import { Observable } from "rxjs";

import { User } from "./user.model";
import { Tenant } from "./tenant.model";


@Injectable()
export class AuthService {
  constructor(private http: Http) {}

  signup(user: User) {
    const body = JSON.stringify(user);
    const headers = new Headers({'Content-Type': 'application/json'});
    return this.http.post('/api/tenant', body, {headers: headers})
      .map((response: Response) => response.json())
      .catch((error: Response) => Observable.throw(error.json()));
  }

  signin(user: User) {
    const body = JSON.stringify(user);
    const headers = new Headers({'Content-Type': 'application/json'});
    return this.http.post('/api/user/signin', body, {headers: headers})
      .map((response: Response) => response.json())
      .catch((error: Response) => Observable.throw(error.json()));
  }

  logout() {
    localStorage.clear();
  }

  isLoggedIn() {
    return localStorage.getItem('token') !== null;
  }
}

Теперь я не ищу раздаточных материалов или кого-то, кто напишет это для меня ... просто дружеский толчок в правильном направлении, если это разрешено здесь ;) . Было бы проще просто отказаться от реактивной формы и использовать ngModel? Или, возможно, определить новую угловую модель, которая представляет собой гибрид пользователя/арендатора?

Ваше здоровье.


person Cheekumz    schedule 09.10.2017    source источник


Ответы (1)


На случай, если кто-то увидит это и заинтересуется... Я придавал большое значение своим угловатым моделям, имитирующим мои модели мангустов. В итоге я создал новую угловую модель (signup.model.ts), состоящую из соответствующих полей из моих моделей арендатора и пользователя мангуста. Теперь я не уверен, что это обязательно был идеальный способ структурировать это, однако он работает, поэтому чувствую, что могу использовать его в качестве ответа.

Ваше здоровье.

person Cheekumz    schedule 10.10.2017