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

Question

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

注意：我必须使用 <div [formGroup]...> 因为这个组件会以其他形式被调用。我不能在这里使用表单标签。

我创建了以下组件 - 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的情况下摆脱它？

标签： angulartypescriptvalidationformbuilderformgroups

Answer 1

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

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