Question

我正在关注Angular教程，并在注册页面上遇到了一个奇怪的问题。

页面加载时，确认控件有一个值：

如果我将类型更改为文本，我可以看到其中出现的内容：

这是我的组件html：

<h1 class="page-header">Registration Page</h1>

<form [formGroup]="form" (ngSubmit)="onRegisterSubmit()">
    <div class="form-group">
        <label for="username">Username</label>
        <div>
            <input type="text" name="username" class="form-control" [ngClass]="{'is-invalid': (form.controls.username.errors && form.controls.username.dirty), 'is-valid': !form.controls.username.errors}" autocomplete="off" placeholder="*Username" formControlName="username" />
            <ul class="invalid-feedback">
                <li *ngIf="form.controls.username.errors?.required && form.controls.username.dirty">This field is required</li>
                <li *ngIf="form.controls.username.errors?.minlength && form.controls.username.dirty">Minimum length: 3</li>
                <li *ngIf="form.controls.username.errors?.maxlength && form.controls.username.dirty">Maximum length: 15</li>
                <li *ngIf="form.controls.username.errors?.validateUsername && form.controls.username.dirty">Username can contain only letters and numbers</li>

            </ul>
        </div>
    </div>
    <div class="form-group">
        <label for="email">E-mail</label>
        <div>
            <input type="text" name="email" class="form-control" [ngClass]="{'is-invalid': (form.controls.email.errors && form.controls.email.dirty), 'is-valid': !form.controls.email.errors}" autocomplete="off" placeholder="*Email" formControlName="email" />
            <ul class="invalid-feedback">
                <li *ngIf="form.controls.email.errors?.required && form.controls.email.dirty">This field is required</li>
                <li *ngIf="form.controls.email.errors?.minlength && form.controls.email.dirty">Minimum length: 6</li>
                <li *ngIf="form.controls.email.errors?.maxlength && form.controls.email.dirty">Maximum length: 254</li>
                <li *ngIf="form.controls.email.errors?.validateEmail && form.controls.email.dirty">Invalid email format</li>
            </ul>
        </div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <div>
            <input type="password" name="password" class="form-control" [ngClass]="{'is-invalid': (form.controls.password.errors && form.controls.password.dirty), 'is-valid': !form.controls.password.errors}" autocomplete="off" placeholder="*Password" formControlName="password" />
            <ul class="invalid-feedback">
                <li *ngIf="form.controls.password.errors?.required && form.controls.password.dirty">This field is required</li>
                <li *ngIf="form.controls.password.errors?.minlength && form.controls.password.dirty">Passwords must be at least 8 characters</li>
                <li *ngIf="form.controls.password.errors?.validatePassword && form.controls.password.dirty">Password must contain at two of the following: uppercase letter, lowercase letters, and numbers</li>
            </ul>
        </div>
    </div>
    <div class="form-group">
        <label for="confirm">Confirm Password</label>
        <div>
            <input type="password" name="confirmp" class="form-control" [ngClass]="{'is-invalid': (form.controls.confirmp.errors && form.controls.confirmp.dirty) || (form.errors?.matchingPasswords && form.controls.confirmp.dirty), 'is-valid': !form.controls.confirmp.errors}" autocomplete="off" placeholder="*Confirm Password" formControlName="confirmp" />
            <ul class="invalid-feedback">
                <li *ngIf="form.controls.confirmp.errors?.required && form.controls.confirmp.dirty">This field is required</li>
                <li *ngIf="form.errors?.matchingPasswords && form.controls.confirmp.dirty">Passwords do not match</li>
            </ul>
        </div>
    </div>
    <input type="submit" [disabled]="!form.valid" class="btn btn-primary" value="submit" />
</form>

这是我的注册组件打字稿：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  constructor(private formBuilder: FormBuilder) { 
    this.createForm();
  }  

  form: FormGroup;

  createForm() {
    this.form = this.formBuilder.group({
      email: ['',Validators.compose([
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(254),
        this.validateEmail
      ])],
      username: ['',Validators.compose([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(15),
        this.validateUsername

      ])],
      password: ['',Validators.compose([
        Validators.required,
        Validators.minLength(8),
        this.validatePassword
      ])],
      confirmp: [Validators.required]
    }, {validator: this.matchingPasswords('password', 'confirmp')})
  }

  validateEmail(controls){
    const regExp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
    if (regExp.test(controls.value)) {
      return null;
    }
    else {
      return {'validateEmail' : true};
    }
  }

  validateUsername(controls){
    const regExp = new RegExp(/^[a-zA-Z0-9]+$/);
    if (regExp.test(controls.value)){
      return null;
    }
    else {
      return {'validateUsername': true};
    }
  }

  validatePassword(controls){
    const regExp = new RegExp(/^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{8,})/);
    if (regExp.test(controls.value)){
      return null;
    }
    else {
      return {'validatePassword': true};
    }
  }

  matchingPasswords(password, confirmp){
    return (group: FormGroup) => {
      if (group.controls[password].value == group.controls[confirmp].value){
        return null;
      }
      else {
        return {'matchingPasswords': true};
      }
    }
  }

  onRegisterSubmit() {
    console.log('Form submitted');
  }



  ngOnInit() {
  }

}

我试图调试此值的显示方式，但我似乎无法找到导致它的事件/代码。如果我更改了确认输入的formControlName值，那么问题就会消失，所以这似乎会缩小到使用表单执行某些操作的打字稿。

有人能发现这是来自哪里吗？

Answer 1

当您通过FormGroup创建FormBuilder并使用数组声明属性时，您应该知道数组中的第一项是the value of control：

_createControl(controlConfig: any): AbstractControl {
  if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||
      controlConfig instanceof FormArray) {
    return controlConfig;  
  } else if (Array.isArray(controlConfig)) {
    const value = controlConfig[0];
                  ^^^^^^^^^^^^^^^^^^^
                  look at this
    const validator: ValidatorFn = controlConfig.length > 1 ? controlConfig[1] : null;
    const asyncValidator: AsyncValidatorFn = controlConfig.length > 2 ? 
                           controlConfig[2] : null;
    return this.control(value, validator, asyncValidator); 
  } else {
    return this.control(controlConfig);
  }
 }

如果我们看一下您的代码：

confirmp: [Validators.required]

我们可以得出结论，Validators.required将是confirmp控制的价值。

要修复它，只需在验证器前添加值：

confirmp: ['', Validators.required]

以便您的控件将''作为默认值。

功能文字显示在文本字段

1 个答案: