带有表单控件的 ng-select 需要验证 angular 7

Question

我正在使用ng-select下拉搜索，但如果没有从下拉列表中选择任何内容，我将无法获得验证。我像下面这样返回：

<div class="form-group">
   <ng-select [items]="productData" [searchable]="true" bindLabel="productName"
   [formControl]="prodCode"
   [ngClass]="{ 'is-invalid': submitted && f.prodCode.errors }"
   placeholder="Select Product" required>  
   </ng-select>
   <div *ngIf="submitted && f.prodCode.errors" class="invalid-feedback">
      <div *ngIf="f.prodCode.errors.required">Product Code is required</div>
   </div>
</div>

在 Ts 文件中

this.productForm = this.fb.group({
    prodCode: new FormControl(null, Validators.required)
});
get f() {
    return this.productForm.controls;
}
this.submitted = true;
if (this.productForm.invalid) {
    return;
}

所以恳请您让我知道我的错误在哪里......

Answer 1

你可以这样写：

html：

<form [formGroup]="productForm" (submit)="submit()">
  <ng-select [items]="productData"
      [searchable]="true" 
      bindLabel="name"
      formControlName="prodCode">
  </ng-select>
  <span *ngIf="!productForm.get('prodCode').valid && productForm.get('prodCode').touched">
    <span *ngIf = "productForm.get('prodCode').errors['required']">is required</span>
  </span>
  <button class="btn btn-primary" type="submit">Submit</button> 
</form>

<pre>{{productForm.value|json}}</pre>

ts：

product: FormGroup;

constructor( ) { }

ngOnInit() { 
    this.productForm = new FormGroup({
    prodCode: new FormControl(null, Validators.required),
    });
}
submit(){
    this.validateAllFormFields(this.productForm);
    console.log(this.productForm.valid);
}

提交时的表单验证：

validateAllFormFields(formGroup: FormGroup) {
        Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            if (control instanceof FormControl) {
                control.markAsTouched({onlySelf: true});
            } else if (control instanceof FormGroup) {
                this.validateAllFormFields(control);
            }
        });
    }

检查演示。

Answer 2

添加formControlName="prodCode"

<ng-select [items]="productData" [searchable]="true" bindLabel="productName" [formControlName]="prodCode" [ngClass]="{ 'is-invalid': submitted && f.prodCode.errors }"
  placeholder="Select Product" required>
</ng-select>