Question

如何验证用户是否在chip中选择了mat-chip-list，并且仅当用户选择chip表单时才会生效。现在我在控件上设置了validators.required，但它不起作用。这是我到目前为止所做的：

HTML

<mat-chip-list formControlName="packageName">
   <mat-chip *ngFor="let pkg of packages" selected="true" style="background-color:#8d6e63">
        {{pkg.value}}
   </mat-chip>
</mat-chip-list>

TS

ngOnInit() {
  this.form = new FormGroup({
    'packageName': new FormControl('', Validators.required),
})

Answer 1

您可以使用form.status获取表单状态VALID或INVALID或form.controls.packageName.errors以获取formControl错误的数组，如果没有错误则使用null。

Here is a running example using your code.

Answer 2

这是我所做的：

... (matChipInputTokenEnd)="add($event, postForm.get('tags'))" />

export interface Tag {
  name: string;
}
...

tags: Tag[] = [];
...

add(event: MatChipInputEvent, form: AbstractControl | null): any {
  // add tag from keyboard
  const input = event.chipInput;
  const value = event.value;
  // Reset the input value
  if (input) {
    input.clear();
  }
  // Add tag
  if ((value || '').trim()) {
    this.tags.push({ name: tag.trim() });
  }

  // set value for validation  <--- key code here
  form?.setValue(this.tags);

  return this.tags;
}

这里的关键是给实际的表单控件添加一个空值或一个空值。

更新： - 我还发现了另一个使用 form groups 的版本。

角度材料垫片验证

2 个答案: