FormArray 的 FormControl 中的唯一值验证 [英] Unique value validation in FormControl of FormArray

问题描述

我正在开发工作表，用户可以在工作表中输入他的爱好.我已经对 hobbyName formcontrol 应用了必需的验证，但是如果有多个爱好，我如何验证应该是唯一的爱好名称.

下面是我的ts代码

import { Component,OnInit } from '@angular/core';从@angular/forms"导入 { FormGroup,FormArray,FormBuilder,Validators }@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnInit {工作表格:表格组构造函数(私有 jobfb:FormBuilder){}ngOnInit(){this.jobForm = this.jobfb.group({爱好:this.jobfb.array([this.createHobbyFormGroup()])})}添加爱好(){让 hobbies = this.jobForm.controls.hobbies 作为 FormArray；爱好.push(this.createHobbyFormGroup());}createHobbyFormGroup(){返回 this.jobfb.group({爱好名称:['',Validators.required]});}}

下面是我的HTML代码

添加爱好<表格><tr [formGroup]="hobbyFG" *ngFor="let hobbyFG of jobForm.controls.hobbies.controls;"><input formControlName="hobbyName"/></tr><button [disabled]="!jobForm.valid">提交</button>

每当用户点击添加按钮时，就会在 FormArray 中添加新的 FormGroup.

我不知道如何验证应该是唯一的爱好名称?

请指导.

解决方案

好的，你可以使用 RxwebValidators 包，我已经实现了它的工作.在我的代码下面共享.

在 ts 文件中(在应用模块中导入)

 import { RxwebValidators } from '@rxweb/reactive-form-validators';导出类 ProductComponent 实现 OnInit ,Product {public complexForm: FormGroup = this.builder.group({'firstName' : ['',[Validators.required,Validators.pattern('^[a-zA-Z0-9]+$')]],'lastName': ['', Validators.minLength(5)],爱好:this.builder.array([this.createHobbyFormGroup()]),'性别女'，'远足' : 假,'运行':假，游泳":假});添加爱好(){让 hobbies = this.complexForm.controls.hobbies 作为 FormArray；爱好.push(this.createHobbyFormGroup());}createHobbyFormGroup(){返回 this.builder.group({爱好名称:['',RxwebValidators.unique()]});}}

在 HTML 中

 <头><tr><th scope="col">#</th><th scope="col">爱好名称</th></tr></thead><tr [formGroup]="skillGroup" *ngFor="let SkillGroup of complexForm.controls.hobbies.controls;let i = index;"><td><input type="text" formControlName="hobbyName" class="form-control"/></tr></tbody>
{{i+ 1}}
<div class="form-group"><label>爱好</label><input class="form-control" type="text" [formControl]="complexForm.controls['hobbies']">

我希望它会有所帮助:)

I am developing Job form where user can enter his hobbies in the Job Form. I have applied required validation on hobbyName formcontrol, but how can I validate hobby name which should be unique if there is more than one hobby.

Below is my ts code

import { Component,OnInit } from '@angular/core';
import { FormGroup,FormArray,FormBuilder,Validators } from "@angular/forms"
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  jobForm:FormGroup
  constructor(private jobfb:FormBuilder){}

  ngOnInit(){
    this.jobForm = this.jobfb.group({
      hobbies:this.jobfb.array([
        this.createHobbyFormGroup()
      ])
    })
  }

  addHobby(){
    let hobbies = this.jobForm.controls.hobbies as FormArray;
    hobbies.push(this.createHobbyFormGroup());
  }

  

  createHobbyFormGroup(){
    return this.jobfb.group({
      hobbyName:['',Validators.required]
    });
  }

}

below is my Html code

<button (click)="addHobby()">Add Hobby</button>
<table>
  <tr [formGroup]="hobbyFG" *ngFor="let hobbyFG of jobForm.controls.hobbies.controls;">
    <input formControlName="hobbyName"/>
  </tr>
</table>
<button [disabled]="!jobForm.valid">Submit</button>

whenever user click on add button, at that time new FormGroup will be added in the FormArray.

I am not able to figure out how can I validate the hobby name, which should be unique?

Please guide.

解决方案

Ok,you can use RxwebValidators package,I have implemented it its working.Shared below my code.

In ts file(import in app module)

    import { RxwebValidators } from '@rxweb/reactive-form-validators';

    export class ProductComponent implements OnInit ,Product {
    public complexForm: FormGroup = this.builder.group({
    'firstName' : ['',[Validators.required,Validators.pattern('^[a-zA-Z0-9]+$')]],
      'lastName': ['', Validators.minLength(5)],
      hobbies:this.builder.array([
        this.createHobbyFormGroup()
      ]),
      'gender' : 'Female',
      'hiking' : false,
      'running' : false,
      'swimming' : false
    });

    addHobby(){
    let hobbies = this.complexForm.controls.hobbies as FormArray;
    hobbies.push(this.createHobbyFormGroup());
  }

  createHobbyFormGroup(){
    return this.builder.group({
      hobbyName:['',RxwebValidators.unique()]
    });
  }



 }

In Html

    <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">hobby Name</th>
    </tr>
  </thead>
  <tbody>
    <tr [formGroup]="skillGroup" *ngFor="let skillGroup of complexForm.controls.hobbies.controls;let i = index;">
      <th scope="row">{{i+ 1}}</th>
      <td><input type="text" formControlName="hobbyName" class="form-control"  />
    </tr>
  </tbody>
</table>
  <div class="form-group">
    <label>hobbies</label>
    <input class="form-control" type="text" [formControl]="complexForm.controls['hobbies']">
  </div>

I hope it will be helpful :)

这篇关于FormArray 的 FormControl 中的唯一值验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！