- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何验证 mat-chip
是否已添加到 mat-chip-list
。我正在使用 ReactiveForms。我已经尝试使用 required
验证器。
该值可以是姓名列表,因此在提交表单之前,我需要确保我的姓名列表中至少有 1 个姓名。如果列表为空,则 mat-error
应该显示错误消息。使用 required
验证器会使表单无效,无论将名称添加到列表中。
编辑:响应式表单
我尝试制作一个自定义验证器,我现在使用的是响应式表单而不是模板驱动的表单,但我无法让它工作。我编辑了以下代码以反射(reflect)我的更改,并创建了这个 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 的 FormArray
状态为 INVALID
时,chipList 的 errorState
未设置为 true
>。
我面临着同样的问题,不知道为什么这不是开箱即用的,也不知道如何将 chipList 的表单作为 FormArray
来隐式实现。
作为解决方法,您可以从 FormArray
监听状态变化并手动设置 chipList 的 errorState
:
@ViewChild('chipList') chipList: MatChipList;
ngOnInit() {
this.myForm.get('names').statusChanges.subscribe(
status => this.chipList.errorState = status === 'INVALID'
);
}
关于Angular 2+ Material mat-chip-list formArray验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65307864/
这是我想要完成的: 在一个页面中,用户将能够上传他们对某些外汇对的保护。因此,用户可以选择不同的时间范围来上传他们的图像分析。我的表格很简单: dataForm: FormGroup; this.da
我不知道如何重置 FormArray 的单个字段,例如: myForm = this.fb.group( { title: ["", [Validators.r
我正在尝试在 formarray 中实现 formarray 但它不起作用,下面也尝试过但不起作用。 How to get FormArrayName when the FormArray is ne
我用 ControlValueAccessor 构建了一个自定义输入组件,它非常适合添加标签作为选择。 ( Stackblitz ) 我的问题是: 当我在表单中实现组件时(城市和州控件) 通过选择一些
我认为这可能是响应式(Reactive)表单的一个错误。如果有经验丰富的 Angular 专家提供帮助,我将不胜感激。 症状:无法在给定时间输入超过 1 个字符。 出现情况:当输入是 FormArra
如何解决下面提到的错误: Type 'FormArray' is not assignable to type 'any[]'. Property 'includes' is missing in t
我有一个表单,其中一个控件是 formGroups 的 formArray。我将自定义验证器设置为 formGroups 中的一些控件。验证器工作正常,如果我在某些控件无效时检查 formArray
我想在表单中添加自定义验证器,以防止 mat-step 切换到下一步。当我使用 FormGroups 时一切正常,但当我必须使用 FormArray 时无法实现验证。 我已经尝试了至少两种在表单初始化
我想要多条错误消息,但不知道该怎么做......?在这里,我需要分别验证每个步骤,这就是我使用此步进器的原因 Em
我已经实现了一个 stackblitz,您可以在其中使用一些配置创建一个动态表单。一切正常,直到您使用 FormArray .什么想法?基本上,您的配置文件中可以有许多不同类型的字段。例如 check
我想用 FormArray 创建一个可编辑的表格。 为此,我有 results在表中呈现的属性。 用 FormArray 数据初始化它的正确方法是什么? results: Array; tableFo
我有一个动态大小的项目。对于每个我想生成一个复选框的项目。 我认为最好的方法是使用 FormArray。 但是我无法设置任何其他属性来指定动态复选框的标签。 items: Array = ['Bana
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
这是我的表单组: this.productGroup = this.fb.group({ name: ['', Validators.compose([Validators.required, V
我在 Angular 6 中使用了响应式(Reactive)形式。这种响应式(Reactive)形式包含一个名为 instruments 的 FormGroup,它是一个 FormArray。 我收到
我的 Angular 5/Angular Material 应用程序中有这个 FormArray: this.form = new FormGroup({ customerNumberC
我有一个 PhoneNumbersFormComponent 其模板如下所示: 我想通过 angular-cli 的 ng g component
我用 angular2 和 typescript 构建了一个表单。我尝试动态添加复选框列表,但它对我不起作用,我的错误在哪里? 模板代码:
我有在 FormBuilder 的帮助下构建的 Angular 表单。 Form 包含一个 FormArray,它具有用户想要的任意多的字段。我已经为字段设置了验证器 this.fb.array([t
我创建了一个自定义验证器来验证我的 FormArray 中的唯一性。当特定的值已经在数组中时,我想显示错误。 问题是它没有按预期工作。 实际行为: 重现步骤: 添加 3 个“输入”- 地址; 填写输入
我是一名优秀的程序员,十分优秀!