大佬教程收集整理的这篇文章主要介绍了angular – 每个表行的反应形式，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<tbody [ngClass]="{'alternate-row-color': $even}" *ngFor="let single of allTeamDetails"> <tr> <td class="td-data first-column"> <input type="text" class="input-text form-control" [value]="single.first_name"> </td> <td class="td-data second-column"> <input type="text" class="input-text form-control" [value]="single.last_name"> </td> <td class="td-data third-column"> <input type="email" class="input-text form-control" [value]="single.email"> </td> <td class="td-data fourth-column"> <SELEct class="SELEction-dropdown width-80-percent" [value]="single.user_role"> <option *ngFor="let singleRole of allUserRole" value="{{singleRole.namE}}">{{setUserRoleAndType(singleRole.Name)}}</option> </SELEct> </td> <td class="td-data fifth-column" > <input type="password" class="input-text form-control" > </td> <td class="td-data sixth-column" > <input type="password" class="input-text form-control" > </td> <td class="td-data save-send-tm-data"> <button class="btn save-user-details save-sub-account-details" type="button" data-toggle="tooltip" title="Save"><i class="fa fa-floppy-o" aria-hidden="true"></i></button> </td> <td class="td-data save-send-tm-data"> <button class="btn save-user-details save-sub-account-details" (click)="openSendmessageModal(single.email)" type="button" data-toggle="tooltip" title="Send message"><i class="fa fa-envelope" aria-hidden="true"></i></button> </td> <tr> </tbody>
您的表单应如下所示：
<!--This is your master form--> <form [formGroup]="teamForm"> <!--Use formArray to create multiple,smaller forms'--> <div formArrayName="memberDetails"> <div *ngFor="let single of allTeamDetails; let $index=index"> <div [formGroupName]="$index"> <div> <!--your field properties of every repeated items--> <input placeholder="First Name" type="text" formControlName="firstName" /> </div> <div> <input placeholder="last name" type="text" formControlName="lastName" /> </div> </div> </div> </div> </form>
在组件中,您可以使用angular的formBuilder来帮助构建表单.
constructor(private formBuilder: FormBuilder) { this.teamForm = this.formBuilder.group({ memberDetails: this.formBuilder.array([]) }); }
现在,您可以初始化重复模型的每个属性.然后,您可以自定义每个字段的每个验证器.请注意打字稿文件中与html中的属性相对应的属性.我在NgOnInit中执行所有这些操作,以便在呈现之前属性可以绑定到html.
ngOnInit() { this.teamForm = this.formBuilder.group({ memberDetails: this.formBuilder.array( this.allTeamDetails.map(x => this.formBuilder.group({ firstName: [x.first_name,[Validators.required,Validators.minLength(2)]],lastName: [x.last_name,Validators.minLength(2)]] })) ) }) }
毕竟,添加验证消息非常简单.这样做的好处是什么？
>因为每个实例现在都是单个formGroup,所以您可以将验证逻辑自定义为非常精细的级别.
>如上所述,您可以订阅每个较小表单的每个valueChange,直到每个单个字段.例如,如果您想订阅第一个团队成员的名字的字段更改,您可以这样做：
this.teamForm .controls.memberDetails .controls[0] //get the first instance! .controls.firstName //get the firstName formControlName .valueChange .subscribe(x=>console.log('value changed!))
>如果您要验证主表单,也可以这样做.
以上是大佬教程为你收集整理的angular – 每个表行的反应形式全部内容，希望文章能够帮你解决angular – 每个表行的反应形式所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。