Angular FormArray 中的唯一项目名称验证器 [英] Unique item name validator in Angular FormArray
问题描述
我想验证项目名称文本必须是唯一的.我已经参考了 SO 链接,但链接示例对我不起作用.我试图对各自的答案发表评论,但我没有太多的声誉.
I want validate the item name text must be unique. I have refered SO links, but links examples are not working for me. I tried to comment on respective answer, but I don't have a much reputation to do that.
链接 1: Angular - FormArray 中的唯一性验证器
链接 2 : FormControl 中的唯一值验证FormArray
以下是我当前的代码:
import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,FormArray } from "@angular/forms"
import { RxwebValidators } from "@rxweb/reactive-form-validators"
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
public uniqueRowForm: FormGroup;
constructor(private fb:FormBuilder){
}
ngOnInit() {
this.uniqueRowForm = this.fb.group({
items:this.fb.array([]),
});
this.adduserItem();
}
adduserItem(){
let items = <FormArray>this.uniqueRowForm.controls.items;
items.push(this.fb.group({
name:['',RxwebValidators.unique()]
}));
}
}
以下是我的 HTML 代码:
below is my HTML code:
<button (click)="adduserItem()">Add Item </button>
<table class="table">
<thead>
<tr>
<th scope="col">Item</th>
</tr>
</thead>
<tbody>
<tr [formGroup]="item" *ngFor="let item of uniqueRowForm.controls.items.controls;let i = index;">
<td><input type="text" formControlName="name" class="form-control" />
<span *ngIf="item.controls.name.errors.unique">not unique</span>
</td>
</tr>
</tbody>
</table>
Stackblitz 示例,但不符合我的要求:https://stackblitz.com/edit/angular-paqxqs?file=src%2Fapp%2Fapp.component.html
Stackblitz example but not working as per my requirement : https://stackblitz.com/edit/angular-paqxqs?file=src%2Fapp%2Fapp.component.html
请帮忙.
推荐答案
只需在 errors
对象的末尾添加 ?
以确保它不是未定义的.
Just add ?
at the end of your errors
object to insure that it is not undefined.
<span *ngIf="item.controls.name.errors?.unique">not unique</span>
这篇关于Angular FormArray 中的唯一项目名称验证器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!