Added ng-select reactive form validation messages not showing

Question

I added an error message to ng-select component to show error messages when it's dirty and value not selected. But the error message is not showing. But the validation is working.

https://ng-select.github.io/ng-select/

<form [formGroup]="itemForm" (ngSubmit)=onSubmitForm()>
    <div class="form-group col">
        <label for="pack_size">Supplier</label>
        <ng-select 
            bindLabel="supplier" 
            placeholder="Select Supplier" 
            formControlName="supplier"
            [ngClass]="{ 'is-invalid': supplier.invalid && supplier.touched }" 
            >
            <ng-option *ngFor="let supplier of suppliers" [value]="supplier.id">
                {{supplier.description}}
            </ng-option>
        </ng-select>
        <div *ngIf="supplier.invalid && supplier.touched" class="invalid-feedback">
            <div *ngIf="!!supplier.errors.required">Supplier is required</div>
        </div>
    </div>
    </div>
    <button class="btn btn-primary" type="submit"
                            [disabled]="itemForm.invalid">Add</button>
</form>

CSS classes that has been added

ng-select.ng-invalid.ng-touched .ng-select-container {
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
}

ts file for the form functions as requested

itemForm: FormGroup;

constructor(
    private _fb: FormBuilder,
) {}

ngOnInit() {
    this.submitted = false;
    this.buttonValue = 'Add';
    this.loadOthers();
    this.itemsLoad();
    this.itemForm = this._fb.group({
        id: [null],
        name: [null, Validators.required],
        pack_type: [null, Validators.required],
        pack_size: [null, Validators.required],
        supplier: [null, Validators.required],
        item_category: [null, Validators.required],
    });
}


get id() {
    return this.itemForm.get('id');
}

get name() {
    return this.itemForm.get('name');
}

get pack_type() {
    return this.itemForm.get('pack_type');
}

get pack_size() {
    return this.itemForm.get('pack_size');
}

get supplier() {
    return this.itemForm.get('supplier');
}

get item_category() {
    return this.itemForm.get('item_category');
}

Answer 1

Please try Like this

<form [formGroup]="itemForm" (ngSubmit)=onSubmitForm()>
    <div class="form-group col">
        <label for="pack_size">Supplier</label>
        <ng-select 
            bindLabel="supplier" 
            placeholder="Select Supplier" 
            formControlName="supplier"
            [ngClass]="{ 'is-invalid': itemForm.get('supplier').invalid && itemForm.get('supplier').touched }" 
            >
            <ng-option *ngFor="let supplier of suppliers" [value]="supplier.id">
                {{supplier.description}}
            </ng-option>
        </ng-select>
        <div *ngIf="itemForm.get('supplier').invalid && itemForm.get('supplier').touched" class="invalid-feedback">
            <div *ngIf="!!itemForm.get('supplier').hasError('required')">Supplier is required</div>
        </div>
    </div>
    </div>
    <button class="btn btn-primary" type="submit"
                            [disabled]="itemForm.invalid">Add</button>
</form>

you need to change your supplier to itemForm.get('supplier')

I am not sure but I think you need to change your classes too.