Angular Reactive Form - 验证在 formGroup 中不起作用

Question

我定义了这个表单组

get createItem(): FormGroup {
    return this.formBuilder.group({
        name: ['', Validators.required],
        email: ['', Validators.required],
        mobile: ['', Validators.required],
    });
}

生成这样的字段

<form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit()">


    <div class="row" formArrayName="address" *ngFor="let fields of AddressInfo.controls; let i = index">
        <ng-container [formGroupName]="i">

            <div class="form-group col-md-12">
                <div class="each_content">
                    <label class="labelTitle">Name <span class="validation-error">*</span></label>
                    <input type="text" class="form-control height-reset" placeholder="Enter Name" name="name" formControlName="name" />

                    <div
                            *ngIf="dynamicFormGroup.get('name').invalid && (dynamicFormGroup.get('name').dirty || dynamicFormGroup.get('name').touched)">
                        <small class="validation-error">Please provide a title.</small>
                    </div>

但是，验证不起作用，任何解决方案，谢谢。

Answer 1

未显示错误的原因是它必须满足以下条件：

• 控件的值无效。
• 控件处于

  dirty

  或

  touched

  状态。

当您提交表单而没有触摸/输入具有验证功能的表单控件时，第二个条件将无法满足。

因此，当您提交表单时，您需要将表单控件设置为

dirty

或

touched

状态。您可以使用根

markAllAsTouched

中的

FormGroup

方法将所有控件标记为已触摸。

onSubmit() {
  this.dynamicFormGroup.markAllAsTouched();

  ...
}

回到评论中讨论的部分，

name

控件并不存在于

address

FormArray

的FormGroup中。所以不确定为什么你把验证错误消息模板放在那里。

我演示了属于

address

FormArray 的控件之一：“streetAddress”。要检索

streetAddress

控件，您需要提供

address

FormArray

的索引，如下所示：

addressFormGroup(i: number) {
  return this.AddressInfo.controls[`${i}`] as FormGroup;
}

<div
  *ngIf="addressFormGroup(i).get('streetAddress')?.invalid && (addressFormGroup(i).get('streetAddress')?.dirty || addressFormGroup(i).get('streetAddress')?.touched)"
>
  <small class="validation-error"
    >Please provide a Street Address.</small
  >
</div>

演示@StackBlitz

Answer 2

我稍微编辑了你的 StackBlitz 并做了一些小改动。请检查并看看它是否适合您。 我引入了一个

hasError

函数，它接受相应的输入并检查有效性。

dynamicFormGroup.get('name').invalid

不会返回任何内容，因为您试图在表单内获取 formGroup，但您需要嵌套 formArray 内的特定 formGroup。
dynamicFormGroup --> 地址 --> 具体名称输入

通过将索引和 formControlName 传递给 hasError 函数，这应该可以工作。