CODEWITHSUNDEEP
angularbootstrap-4angular-ngselect
Cherry R
Cherry R

Reputation: 89

ng-select with form control required validation angular 7

I'm using ng-select for dropdown search but I'm unable to get validation if not selecting anything from dropdown. I return like bellow:

<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>

in Ts File 

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;
}

So kindly requesting you please let me know where is my mistake....

Upvotes: 7

Views: 24778

Answers (3)

Lidiya Parshina
Lidiya Parshina

Reputation: 324

You need to use class ng-select-invalid:

<ng-select [formControl]="prodCode"
           [ngClass]="{'ng-select-invalid': prodCode.touched && prodCode.errors}"
></ng-select>
<span *ngIf="prodCode.touched && prodCode.errors">This field is required!</span>

in component.ts file:

public prodCode = new FormControl(null, Validators.required);

submit(evt){
    this.prodCode.markAsTouched();
    if (this.prodCode.valid) {//some code here}
    else evt.preventDefault();
}

Upvotes: 0

Lia
Lia

Reputation: 11982

You can write it this way:

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);
}

form validation on submit:

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);
            }
        });
    }

check Demo.

Upvotes: 8

Adrita Sharma
Adrita Sharma

Reputation: 22213

Add 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>

Upvotes: 2

Related Questions