无法从我的表单-angular-mongodb中设置很多值

yc0p9oo0  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(149)

在我的前端,我有一个包含3个字段的表单:
生日
昵称
描述
我设法记录用户输入的值,用console.log显示它们,但无法将它们发送回我的前端。控制台中没有弹出错误。。。我承认我完全迷路了。在我将如此多的信息放入表单之前,我只使用了一个description字段和一个req.body.xx,做了一些简单的事情,它干净地返回了所有信息。我也这么做,但更有价值。它不起作用
有什么想法吗?

<form name="form" [formGroup]="userForm" (ngSubmit)="onSubmit()" style="margin-top: 10px; display: flex;flex-direction: column;padding: 10px;">
        <div class="form-group flexVerticalAlign">
            <input required formControlName="nickname" type="text" class="form-control" name="nickname" placeholder="Votre nom">
            <mat-error style="text-align: center; margin-bottom: 10px;" *ngIf="userForm.get('nickname').invalid && userForm.get('nickname').dirty && userForm.get('nickname').touched">Entrez un pseudo valide (4 à 20 caractères)</mat-error>
        </div>

        <div class="formContainer row flexHorizontalAlign">
            <mat-form-field appearance="fill" class="example-form-field col">
                <mat-label>Date de naissance</mat-label>
                <input matInput [matDatepicker]="datepicker" formControlName="birthdate">
                <mat-error *ngIf="userForm.get('birthdate').invalid">Entrez une date valide</mat-error>
                <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
                <mat-datepicker #datepicker>
                  <mat-datepicker-actions>
                    <button mat-button matDatepickerCancel>Retour</button>
                    <button mat-raised-button color="primary" matDatepickerApply>Valider</button>
                  </mat-datepicker-actions>
                </mat-datepicker>
              </mat-form-field>
          </div> 

        <div class="form-group flexVerticalAlign">
            <label for="description" style="margin-right: 10px;">Description</label>
            <textarea required formControlName="description" type="text" class="form-control" placeholder="" name="description" rows="5"></textarea>
            <mat-error style="text-align: center; margin-bottom: 10px;" *ngIf="userForm.get('description').invalid && userForm.get('description').dirty && userForm.get('description').touched">Entrez une description valide (4 à 150 caractères)</mat-error>
        </div>

        <div mat-dialog-actions class="flexVerticalAlign">
            <button mat-flat-button id="submit" type="submit">Enregistrer</button>
        </div> 
    </form>

我的组件

userForm = this.fb.group({
   description: new FormControl('', [Validators.minLength(4), Validators.maxLength(150)]),
   nickname: new FormControl('', [Validators.minLength(4), Validators.maxLength(30)]),
   birthdate: new FormControl('')
 });

 async onSubmit(){    
   let result: any = await this.mainService.addAndUpdate(this.userForm.value);
   if (result.success){
     location.reload();
   }
 }

我的app.js

// add and update
app.post('/addAndUpdate', validateCookie, async (req, res) => {
    //convert id to mongoose objectId 
    var mongoose = require('mongoose');
    let userId = mongoose.Types.ObjectId(req.body.userId);
    console.log(req.body)

    // determinate age
    var timeDiff = Math.abs(Date.now() - new Date(req.body.birthdate).getTime());
    let age = Math.floor(timeDiff / (1000 * 3600 * 24) / 365.25);

    let data = {};
    if (req.body.description != "" && req.body.description != undefined){
        data.description = req.body.description;
    };
    if (req.body.birthdate != "" && req.body.birthdate != undefined){
        data.age = age;
    };
    if (req.body.nickname != "" && req.body.nickname != undefined){
        data.nickname = req.body.nickname;
    };

    console.log(data);
    console.log(data.age);
    console.log(data.nickname);
    console.log(data.description);

    db.collection("users").findOneAndUpdate(
        {
            userId: req.body.userId
        }, 
        {
            $set: { 
                description: data.description,
                nickname: data.nickname,
                birthdate: data.age 
            }
        },
        function (err, foundUser) {
            if (err) {
                res.status(201).send({
                    success: false,
                    'message': "Erreur lors de la recherche de l'utilisateur."
                });
                return console.log("error find user id in db: " + err);
            }
            if (foundUser){
                return res.status(200).send({
                    success: true,
                    'message': "Infos modifiées."
                });
            }
    });
});

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题