验证失败时，Div 中的 FormGroup 突出显示所有字段

问题描述

我需要在我的 Angular 应用程序中重复使用 2 个字段 - 生成日期和到期日期。

注意：我必须使用

因为这个组件会在其他表单中被调用。我不能在这里使用表单标签。

我创建了以下组件 - MyFilter.component.ts：

export class MyFilterComponent {
  filterForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.filterForm = formBuilder.group({
      producedDate: ['',[Validators.required]],expiryDate: ['',[Validators.required]]
    });
  }
}

然后我有下面的 my-filter.component.html：

<div [formGroup]="filterForm">
    <div class="form-group">
        <label for="producedDate"> Produced Date</label>
        <input type="date" formControlName="producedDate" class="form-control">
        <div class="alert alert-danger" name="producedDaterequiredWarning"
            *ngIf="filterForm.get('producedDate').errors && filterForm.get('producedDate').touched">
            Field is required.
        </div>
    </div>
    <div>
        <label for="expiryDate"> Expiry Date</label>
        <input type="date" formControlName="expiryDate" class="form-control">
        <div class="alert alert-danger" name="expiryDaterequiredWarning"
            *ngIf="filterForm.get('expiryDate').errors && filterForm.get('expiryDate').touched">
            Field is required.
        </div>
    </div>
</div>

当验证失败时 - 即如果我触摸生产日期字段并且不输入任何内容，我希望只有该字段以红色突出显示。但我目前在左侧得到一个长边框，如下所示：

有没有办法在不覆盖 css 的情况下摆脱这种情况？

1 个答案:

答案 0 :(得分：0)

尝试将您的 ngIf 条件更改为：

*ngIf="filterForm.get('producedDate').touched && filterForm.get('producedDate').hasError('required')"

解决方法

尝试将您的 ngIf 条件更改为：

*ngIf="filterForm.get('producedDate').touched && filterForm.get('producedDate').hasError('required')"