Я хочу проверить пользовательскую проверку формы для уникального ИД пользователя из базы данных, но это дает ошибку для formGroup ожидает экземпляр formGroup

Question

компонент. html

<div class="container">

    <form [formGroup]="userGroup" (ngSubmit)="onsubmit()">  
        <div class="form-group">
            <label>Enter name</label>
            <input type="text" class="form-control" formControlName="name"><br>
        </div>
        <div *ngIf="userGroup.controls.name.invalid && (userGroup.controls.name.touched || userGroup.controls.name.dirty)" class="alert alert-danger">
            <div *ngIf="userGroup.controls.name.errors.required">
                Name is required
            </div>
        </div>
        <div class="form-group">
            <label>Enter UserId</label>
            <input type="text" class="form-control" formControlName="uid"><br>
        </div>
        <div class="form-group">
            <label>Enter password</label>
            <input type="password" class="form-control" formControlName="pwd"><br>
        </div>
        <div class="form-group">
            <label>Enter email</label>
            <input type="email" class="form-control" formControlName="email"><br>
        </div>
        <div class="form-group">
            <label>Enter mobile</label>
            <input type="text" class="form-control" formControlName="mobile" ><br>
        </div>
        <div *ngIf="userGroup.controls.mobile.invalid && (userGroup.controls.mobile.dirty || userGroup.controls.mobile.touched)">
            <div *ngIf="userGroup.controls.mobile.errors.required">
                Mobile number cannot be blank
            </div>
            <div *ngIf="userGroup.controls.mobile.errors.pattern" class="alert alert-danger">
                Mobile number should be 10 digits only
            </div>
        </div>
            <input type="submit" class="btn btn-default" value="Create">
    </form>

component.ts

export class CreateComponent implements OnInit {
    constructor(private fb: FormBuilder,private service:CreatService) { }
    userGroup:FormGroup;
    ngOnInit() {
      this.userGroup = this.fb.group({
      name:['',Validators.required],
      uid:['',[Validators.required,checkUid]],
      pwd:['',Validators.required],
      email:['',Validators.required],
      mobile:['',[Validators.required,Validators.pattern(/^[0-9]{10}$/)]]
     });
    }
  }
}

check.ts Пользовательская проверка

import { AbstractControl } from '@angular/forms';
import { CreatService } from '../creat.service';

export function checkUid(control: AbstractControl,service:CreatService) {
    //console.log(control.value)
    this.service.check(control.value).subscribe(
       (res) => {
         if (res===control.value) { 
             return null;
         }
         return {
             isError : true
         };
       }
     );
  }

сервер . js

app.post("/check",function(req,res){
let uid = req.body.uid;
db.collection("uses").find({users:uid}).toArray((err,response)=>{
    if (err) {
        throw err;
    }
    console.log(response);
    if (response && response.length) {
        res.json(uid);
    }
    else {
        res.json("1");
    }
  })
})

Кроме того, при вводе в текстовое поле ошибка выдачи не может считывать элементы управления свойствами undefined.

CreateComponent. html: 3 Ошибка: formGroup ожидает экземпляр FormGroup. Пожалуйста, введите один.

Вывод должен быть таким, чтобы идентификатор пользователя был зарегистрирован в базе данных и отображалось соответствующее сообщение об ошибке

Answer 1

Ошибка не в том, что вы пытаетесь достичь с помощью своей базы данных и компонента, а, вероятно, с вашим шаблоном.

Ошибка ясно указывает на то, что formGroup ожидает FormGroup экземпляр.

Вы можете иметь: <form> без директивы formGroup.

Попробуйте:

<form [formGroup]="userGroup">

Это также может произойти, если у вас есть условие в теге формы.

Ошибка в CreateComponent.html:3, где у вас, вероятно, есть начальный тег формы.