ng-select with form control required validation angular 7

Question

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

Lia · Accepted Answer · 2019-10-26 12:54:49Z

8

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.

edited Oct 26, 2019 at 12:54

answered Oct 26, 2019 at 12:32

Lia

12k3 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cherry R Over a year ago

@hi Fazil i need validation not null value ... i tried it already ..

Lia Over a year ago

You can see in demo if you put it empty will get validation error.

Cherry R Over a year ago

@yes Fazil its showing but while click on submi=t button need to validate if not selecting anything from dropdown

Cherry R Over a year ago

entair application need to fallow one type validation thats why im using F()...

Adrita Sharma · Accepted Answer · 2019-10-26 12:19:03Z

2

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>

answered Oct 26, 2019 at 12:19

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

1 Comment

Kumaresan Perumal Over a year ago

How to show the validation messages? ex: If a user does not select anything. I should show "please select something"

Lidiya Parshina · Accepted Answer · 2022-01-12 14:28:18Z

0

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

answered Jan 12, 2022 at 14:28

Lidiya Parshina

3242 silver badges8 bronze badges

Collectives™ on Stack Overflow

ng-select with form control required validation angular 7

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related