無法讀取自定義驗證程序的屬性，並且必填-Angular

Question

我嘗試制作自定義驗證器，當他/她在文本上留出空格時會給用戶消息，但我收到此錯誤。

• 1-無法讀取未定義的屬性'removeSpaceFromUserName'
• 2-無法讀取Object.eval中null的“必需”屬性[作為updateDirectives]

這是組件的html

  <form [formGroup]='form'> <div class="form-group"> <label for="username">Username</label> <input formControlName='username' id="username" type="text" class="form-control"> <div *ngIf="username.touched && username.touched" class="alert alert-danger"> <div *ngIf="username.errors.required"> You need to enter user name</div> <div *ngIf="username.errors.minlength"> Min Length is {{ username.errors.minLength.requiredLength}} </div> <div *ngIf="UserNameValiditors.removeSpaceFromUserName"> removeSpaceFromUserName </div> </div> </div> <div class="form-group"> <label for="password">Password</label> <input formControlName='password' id="password" type="text" class="form-control"> </div> <button class="btn btn-primary" type="submit">Sign Up</button> </form> 

這是自定義驗證器類

 import { AbstractControl, ValidationErrors } from "@angular/forms"; export class UserNameValiditors { static removeSpaceFromUserName(control: AbstractControl): ValidationErrors | null { if ((control.value as string).indexOf(' ') >= 0) { return { removeSpaceFromUserName: true }; } else { return null; } } } 

 import { Component } from '@angular/core'; import { FormControl , FormGroup , Validators } from "@angular/forms"; import { UserNameValiditors } from './UserNameValditors'; @Component({ selector: 'signup-form', templateUrl: './signup-form.component.html', styleUrls: ['./signup-form.component.css'] }) export class SignupFormComponent { form= new FormGroup( { username : new FormControl('', [ Validators.required, Validators.minLength(3) , UserNameValiditors.removeSpaceFromUserName ]) , password : new FormControl('',Validators.required) }); get username() { return this.form.get('username'); } } 

Answer 1

使用hasError()檢查表單上是否存在某些錯誤。

HTML代碼

<div *ngIf="username.hasError('required')"> You need to enter user name</div>
            <div *ngIf="username.hasError('minlength')"> Min Length is {{ username.hasError('minLength')}}
            </div>f
            <div *ngIf="username.hasError('removeSpaceFromUserName')">
                removeSpaceFromUserName </div>
</div>

您的工作代碼在這里

Answer 2

您可以嘗試使用此解決方案。

我已經在Stackblitz上創建了一個演示

app.component.ts

myForms: FormGroup;

  constructor(fb: FormBuilder) {

    this.myForms = fb.group({
      username: [null, Validators.compose([
        Validators.required, Validators.minLength(3), usernameValidator])],
      password: [null, [
        Validators.required]]
    });
  }

app.component.html

<form [formGroup]="myForms">

    <label>User Name : 
        <input type="text"  formControlName="username">
    </label><br>

    <div class="errors" *ngIf="myForms.get('username').invalid && (myForms.get('username').touched || myForms.get('username').dirty)">

        <div *ngIf="myForms.get('username').hasError('required')">
            username is required
        </div>

        <div *ngIf="myForms.get('username').errors.minlength">
            username must be at least 3 characters
        </div>

        <div class="error-text" *ngIf="myForms.get('username').hasError('removeSpaceFromUserName')">
            removeSpaceFromUserName  
        </div>
    </div>

  <div class="form-group">
            <label for="password">Password</label>
            <input 
                formControlName='password'
                id="password" 
                type="text" 
                class="form-control">
        </div>
        <button class="btn btn-primary" type="submit">Sign Up</button>
</form>