选择选项的Angular 6或2+表单验证未通过验证

时间:2019-01-19 07:20:04

标签: angular validation

角度版本6.x

HTML文件:

<select tabindex="4" class="selectoptn required" formControlName="invoice_type" 
          required [ngClass]="{ 'is-invalid': submitted && f.invoice_type.errors }">
            <option value="" [selected]="true" [ngValue]="undefined">Select an Invoice Type</option>
            <option value="pdf">PDF</option>
            <option value="brc">BRC</option>
          </select>
          <div *ngIf="submitted && f.invoice_type.errors" class="invalid-feedback">
            <div *ngIf="f.invoice_type.errors.required">Invoice type is required</div>
          </div>

控制器中的相关代码:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class ProjectsAddComponent implements OnInit {

constructor(private formBuilder: FormBuilder) {}

this.projectForm = this.formBuilder.group({
  'invoice_type': ['', Validators.required]
});
}

问题:  -提交后,错误消息不会显示。

注意:  -提交后,所有其他输入均已正确验证  -检查员显示表单元素无效-http://prntscr.com/m97p2s

让我知道是否有人可以找到出路。

1 个答案:

答案 0 :(得分:1)

您的代码看起来很完美。我也面临这个问题。当时是班级问题。只需尝试删除类,如下所示。

viewController

当时我没有为该类添加任何CSS。在删除该类后,它对我有用。所以我认为这可能是同一问题。

并确保您必须将protocol CollectionViewCellDelegate: class { func addtoCard(_ cell: TrendingProductsCVCell) } class TrendingProductsCVCell: UITableViewCell { weak var delegate: CollectionViewCellDelegate? // ... the rest of your code @IBAction func addToCardButtonClicked(_ sender: UIButton) { //action of ***addToCard*** delegate?.addToCard(self) } } class viewController: CollectionViewCellDelegate { //and what you want to implement func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = trendingProductCV.dequeueReusableCell(withReuseIdentifier: "TrendingProductsCVCell", for: indexPath) as? TrendingProductsCVCell cell.delegate = self // ... the rest of your code return cell } func addToCard(cell: TrendingProductsCVCell) { //do what you want with your cell and its content } } 放在<div *ngIf="submitted && f.invoice_type.errors"> // Remove class from hear <div *ngIf="f.invoice_type.errors.required">Invoice type is required</div> </div> 标记中。

希望它对您有帮助:)