title: Error: Expected validator to return Promise or Observable
body: <p>i create function muchmatch in ReactiveFormsModule , But when testing, found that there was an error meassege in Angular and I don't really know why.</p>
  
  <p>"Error: Expected validator to return Promise or Observable."</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { UserService } from '../service/user.service';
  import { Router} from '@angular/router';
  
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-login-register',
    templateUrl: './login-register.component.html',
    styleUrls: ['./login-register.component.css']
  })
  export class LoginRegisterComponent implements OnInit {
  
    registerForm: FormGroup;
    submitted = false;
  
    constructor(private formBuilder: FormBuilder) { }
  
    ngOnInit() {
      this.registerForm = this.formBuilder.group({
        name: ['', Validators.required],
        lastName: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]],
        confirmPassword: ['', Validators.required, this.mustMatch('password', 'confirmPassword')],
        passwordHint: ['', [Validators.required, Validators.minLength(6)]],
        confirmPasswordHint: ['', Validators.required , this.mustMatch('passwordHint', 'confirmPasswordHint')],
      });
    }
  
    // convenience getter for easy access to form fields
    get f() { return this.registerForm.controls; }
  </code></pre>
  
  <p>// When Submit</p>
  
  <pre><code>  onSubmit() {
  
        this.submitted = true;
  
        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }
  
        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value));
    }
  </code></pre>
  
  <p>//Function Check password</p>
  
  <pre><code>  mustMatch(p1 , p2) {
  
        return (registerForm: FormGroup) =&gt; {
  
        let pass1 = this.registerForm.controls[p1];
        let pass2 = this.registerForm.controls[p2];
  
        // if (pass1.errors &amp;&amp; !pass2.errors.mustMatch) {
        //   return;
        // }
  
        if (pass1.value !== pass2.value) {
          pass2.setErrors({mustMatch: true});
        } else {
          pass2.setErrors(null);
        }
      }
    }   
  }
  </code></pre>
  
  <p>// Code Show form register Data Resive to backend error when Fill out the information in the column passwordconfirm , passwordHintconfrim</p>
  
  <pre><code>&lt;form [formGroup]="registerForm" (ngSubmit)="onSubmit()" style="width: 500px"&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;First Name&lt;/label&gt;
          &lt;input type="text" formControlName="name" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.name.errors }"
          placeholder="input your name"&gt;
          &lt;div *ngIf="submitted &amp;&amp; f.name.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.name.errors.required"&gt;First Name is required&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;Last Name&lt;/label&gt;
          &lt;input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.lastName.errors }"
          placeholder="input your name"&gt;
          &lt;div *ngIf="submitted &amp;&amp; f.lastName.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.lastName.errors.required"&gt;Last Name is required&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.email.errors }"
          placeholder="input your name"&gt;
          &lt;div *ngIf="submitted &amp;&amp; f.email.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.email.errors.required"&gt;Email is required&lt;/div&gt;
              &lt;div *ngIf="f.email.errors.email"&gt;Email must be a valid email address&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;!--Password--&gt;
      &lt;div class="form-group"&gt;
          &lt;label&gt;Password&lt;/label&gt;
          &lt;input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.password.errors }"
          placeholder="input your name"&gt;
          &lt;div *ngIf="submitted &amp;&amp; f.password.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.password.errors.required"&gt;Password is required&lt;/div&gt;
              &lt;div *ngIf="f.password.errors.minlength"&gt;Password must be at least 6 characters&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label&gt;Confirm Password&lt;/label&gt;
          &lt;input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.confirmPassword.errors }"
          placeholder="input your name"&gt;
          &lt;div *ngIf="submitted &amp;&amp; f.confirmPassword.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.confirmPassword.errors.required"&gt;Confirm Password is required&lt;/div&gt;
              &lt;div *ngIf="f.confirmPassword.errors.mustMatch"&gt;Passwords must match&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;!--Password Hint--&gt;
      &lt;div class="form-group"&gt;
          &lt;label&gt;PasswordHint&lt;/label&gt;
          &lt;input type="password" formControlName="passwordHint" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.passwordHint.errors }"
          placeholder="input your name"&gt;
          &lt;div *ngIf="submitted &amp;&amp; f.passwordHint.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.passwordHint.errors.required"&gt;Password is required&lt;/div&gt;
              &lt;div *ngIf="f.passwordHint.errors.minlength"&gt;Password must be at least 6 characters&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label&gt;Confirm PasswordHint&lt;/label&gt;
          &lt;input type="password" formControlName="confirmPasswordHint" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.confirmPasswordHint.errors }"
          placeholder="input your name"&gt;
          &lt;div *ngIf="submitted &amp;&amp; f.confirmPasswordHint.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.confirmPasswordHint.errors.required"&gt;Confirm Password is required&lt;/div&gt;
              &lt;div *ngIf="f.confirmPasswordHint.errors.mustMatch"&gt;Passwords must match&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;button class="btn btn-primary"&gt;Register&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>