添加了 ng-select 未显示的反应式表单验证消息

Question

我向 ng-select 组件添加了一条错误消息，以在它变脏且值未 selected 时显示错误消息。但是错误消息没有显示。但验证有效。

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 类已添加

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 文件按要求

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

请像这样尝试

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

您需要将 supplier 更改为 itemForm.get('supplier')

我不确定，但我认为您也需要更改类。

添加了 ng-select 未显示的反应式表单验证消息

Added ng-select reactive form validation messages not showing

angular-ngselect

angular