我需要在我的 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 的情况下摆脱这种情况?
答案 0 :(得分:0)
尝试将您的 ngIf 条件更改为:
*ngIf="filterForm.get('producedDate').touched && filterForm.get('producedDate').hasError('required')"