FormBuilder 验证工作不正常

Question

我有这个实现 FormBuilder 的表单。

我需要在输入字段下显示我的自定义验证消息。使用下面的代码，验证器可以在输入字段为空白但不显示我的自定义验证时显示红色 "wrong" 文本。

请参阅下面的 .html 和 .ts

代码

<form [formGroup]="subscriptionForm">
      <h3 style="color: gray; text-align: center;">Registration</h3>
      <div class="row">
        <div class="col-md-6">
          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="UserName" name='UserName' id="UserName" class="form-control" mdbInputDirective>
            <label for="UserName">Your UserName</label>
            <div *ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)" class="alert alert-danger">
              <div *ngIf="UserName?.errors.required">
                Username is required.
              </div>
            </div>
          </div>
        </div>
      </div>
</form>

constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.subscriptionForm = this.fb.group({
      UserName: [null, Validators.required],
    });
}

我已经阅读了 Angular - 表单验证文档，那是我获得代码的地方，但我做错了。谢谢你。

Answer 1

在您看来使用 subscriptionForm.controls.UserName 而不是 UserName

Answer 2

尝试改变

*ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)"

到

*ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched"

在视图中：

<div *ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched" class="alert alert-danger">
    Username is required.
</div>

请试试这个演示：

https://stackblitz.com/edit/angular-5xtbxm?file=app/app.component.html

Answer 3

问题是您缺少文档中的 getter 方法，例如：

get name() { return this.heroForm.get('name'); }

get power() { return this.heroForm.get('power'); }

所以现在当他们在模板中访问 name 时，他们实际上访问了 this.heroForm.get('name')

所以您需要在 *ngIf 中做的是检查：

subscriptionForm.get('UserName').errors.required

Answer 4

要访问表单的模型，您需要使用 subscriptionForm.get('UserName')。为了使其正常工作，我会将模型中的初始值设置为空字符串而不是 null:

constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.subscriptionForm = this.fb.group({
    UserName: ['', Validators.required],
  });

  // also, make access easier using a property...
  get UserName { return this.subscriptionForm.get('UserName'); }
}

FormBuilder 验证工作不正常

FormBuilder validation is not working properly

angular

angular-reactive-forms

angular-validation