Question

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

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

请尝试这样

[i for i in glob("*.nii") if i.split('.')[1] != 'Hip']

您需要将<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

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

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

1 个答案: