角材料(8)验证返回奇怪的文本

 收藏

I am working on a Request form using Angular Material (8). I am trying to write proper Validators and Error Messages for each of the fields on the form. As of now, I am getting the following errors associated with the fields.

enter image description here

为什么在表单中进行此操作?任何帮助,提示或建议,将不胜感激!

TIA

文件:register.component.html

[... snip ...]

   <div class="flex-register-form">

        <!-- Form -->
        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="text-center">

            <div class="form-col">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input required type="text" id="materialRegisterFormFirstName" class="form-control" mdbInput
                            formControlName="firstname" />
                        <label for="materialRegisterFormFirstName">First name</label>
                    </div>
                </div>
                <!-- Last name -->
                <div class="col">
                    <div class="md-form">
                        <input required type="text" id="materialRegisterFormLastName" class="form-control" mdbInput
                            formControlName="lastname" />
                        <label for="materialRegisterFormLastName">Last name</label>
                    </div>
                </div>
[... snip ...]

文件:register.component.ts

import { Component, OnInit } from '@angular/core';
import { RegisterModel } from '../../models/register.models';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})

export class RegisterComponent implements OnInit {

  user : RegisterModel = new RegisterModel();

  registerForm : FormGroup = new FormGroup( {
      'firstname' : new FormControl( [Validators.required, Validators.maxLength(25)] ),
      'lastname'  : new FormControl( [Validators.required, Validators.maxLength(25)]),
      'email'     : new FormControl( [Validators.required, Validators.email, Validators.maxLength(25) ] ),
      'password'  : new FormControl( [Validators.required, Validators.minLength(8), Validators.maxLength(25)]),
      'agree'     : new FormControl( [Validators.required])
    });

  constructor( private formBuilder: FormBuilder ) {

  }

  ngOnInit() {

  }


onSubmit() {
    console.log(" was submited ");
  }

}
回复
  • eipsum 回复

    The problem in your code is here. It is reading Validators value as default value.

    registerForm : FormGroup = new FormGroup( {
          'firstname' : new FormControl( [Validators.required, Validators.maxLength(25)] ),
          'lastname'  : new FormControl( [Validators.required, Validators.maxLength(25)]),
          'email'     : new FormControl( [Validators.required, Validators.email, Validators.maxLength(25) ] ),
          'password'  : new FormControl( [Validators.required, Validators.minLength(8), Validators.maxLength(25)]),
          'agree'     : new FormControl( [Validators.required])
        });
    

    Intialize FormControl with default value say null

    'firstname' : new FormControl( null, [Validators.required, Validators.maxLength(25)] )

    现在尝试这种方式

    registerForm : FormGroup = new FormGroup( {
        'firstname' : new FormControl( null, [Validators.required, Validators.maxLength(25)] ),
        'lastname'  : new FormControl( null, [Validators.required, Validators.maxLength(25)]),
        'email'     : new FormControl( null, [Validators.required, Validators.email, Validators.maxLength(25) ] ),
        'password'  : new FormControl( null, [Validators.required, Validators.minLength(8), Validators.maxLength(25)]),
        'agree'     : new FormControl( null, [Validators.required])
      });