问题描述
如何验证 mat-chip
是否已添加到 mat-chip-list
.我正在使用 ReactiveForms.我已经尝试使用 required
验证器.
How do I validate that a mat-chip
has been added to the mat-chip-list
. I am using ReactiveForms. I have tried with the required
validator.
该值可以是姓名列表,因此在提交表单之前,我需要确保姓名列表中至少有 1 个姓名.如果列表为空,则 mat-error
应显示错误消息.使用 required
验证器会使表单无效,无论将名称添加到列表中.
The value can be a list of names, so I need to make sure that there is atleast 1 name in my list of names before I can submit the form. If the list is empty then mat-error
should display the error message. Using the required
validator makes the form invalid, regardless of adding names to the list.
反应式表单
我尝试制作自定义验证器,现在我使用的是反应式表单而不是模板驱动的表单,但我无法让它工作.我编辑了下面的代码以反映我的更改,并创建了这个 https://stackblitz.com/edit/angular-4d5vfj
I have tried to make a custom validator, and I am now using Reactive Forms instead of Template driven forms, but I cannot get it to work. I have edited the below code to reflect my changes and I have created this https://stackblitz.com/edit/angular-4d5vfj
HTML
<form [formGroup]="myForm">
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList formArrayName="names">
<mat-chip *ngFor="let name of myForm.get('names').controls; let i=index;"
[formGroupName]="i"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(myForm, i)">
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="Names"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event, asset)">
</mat-chip-list>
<mat-error>Atleast 1 name need to be added</mat-error>
</mat-form-field>
</form>
TS
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component} from '@angular/core';
import {FormGroup, FormControl, FormBuilder, FormArray} from '@angular/forms';
import {MatChipInputEvent} from '@angular/material';
@Component({
selector: 'chip-list-validation-example',
templateUrl: 'chip-list-validation-example.html',
styleUrls: ['chip-list-validation-example.css'],
})
export class ChipListValidationExample {
public myForm: FormGroup;
// name chips
visible = true;
selectable = true;
removable = true;
addOnBlur = true;
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
// data
data = {
names: ['name1', 'name2']
}
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
names: this.fb.array(this.data.names, this.validateArrayNotEmpty)
});
}
initName(name: string): FormControl {
return this.fb.control(name);
}
validateArrayNotEmpty(c: FormControl) {
if (c.value && c.value.length === 0) {
return {
validateArrayNotEmpty: { valid: false }
};
}
return null;
}
add(event: MatChipInputEvent, form: FormGroup): void {
const input = event.input;
const value = event.value;
// Add name
if ((value || '').trim()) {
const control = <FormArray>form.get('names');
control.push(this.initName(value.trim()));
console.log(control);
}
// Reset the input value
if (input) {
input.value = '';
}
}
remove(form, index) {
console.log(form);
form.get('names').removeAt(index);
}
}
推荐答案
问题是chipList的的
的
状态为 errorState
没有设置为true
FormArrayINVALID
.
The problem is that the chipList's
errorState
isn't set to true
when the chipList's FormArray
status is INVALID
.
我面临着同样的问题,不知道为什么这不是开箱即用的,也不知道如何通过将chipList 的表单作为
FormArray
来隐式实现这一点.
I'm facing the same problem and don't know why this isn't working out of the box or how this can be achieved implicitly with the chipList's form being a
FormArray
.
作为一种解决方法,您可以从
FormArray
监听状态变化并手动设置chipList 的errorState
:
As a workaround you can listen to status changes from the
FormArray
and set the chipList's errorState
manually:
@ViewChild('chipList') chipList: MatChipList;
ngOnInit() {
this.myForm.get('names').statusChanges.subscribe(
status => this.chipList.errorState = status === 'INVALID'
);
}
https://stackblitz.com/edit/angular-4d5vfj-gywxjz
这篇关于Angular 2+ material mat-chip-list formArray 验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!