标签：relevant val get myGroup 表单 groupobj pc angular
https://blog.csdn.net/qq_38744335/article/details/89227168?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2
https://blog.csdn.net/weixin_39987434/article/details/99674554?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&utm_relevant_index=1
import { FormsModule,ReactiveFormsModule } from '@angular/forms'
import { Component, OnInit } from '@angular/core'; import { FormGroup,FormControl,Validators } from '@angular/forms' import { FormsModule,ReactiveFormsModule } from '@angular/forms'
@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] })
export class HomeComponent implements OnInit {
myGroup: any; data:any={ name:"", telmax:"", telmin:"", telreq:"", telpat:"", } groupobj:any={ valid:"", invalid:"", pristune:"", dirty:"", touched:"", untouched:"", value:"", } constructor() { }
ngOnInit(): void { //'^[a-zA-Z][0-9]*$' const nameformat='[0-9]' this.myGroup = new FormGroup({ 'name':new FormControl(this.data.name,[ Validators.required, ]), 'telmax':new FormControl(this.data.telmax,[ Validators.maxLength(3), ]), 'telmin':new FormControl(this.data.telmin,[ Validators.minLength(3), ]), 'telreq':new FormControl(this.data.telreq,[ Validators.required, ]), 'telpat':new FormControl(this.data.telpat,[ // Validators.pattern(nameformat), ]), }) } get names() { return this.myGroup.get("name") } get telmax(){ return this.myGroup.get("telmax") } get telmin(){ return this.myGroup.get("telmin") } get telreq(){ return this.myGroup.get("telreq") } get telpat(){ return this.myGroup.get("telpat") }
onsubmit(val:any):void{ this.groupobj.valid = val.valid this.groupobj.invalid = val.invalid this.groupobj.pristune = val.pristune this.groupobj.dirty = val.dirty this.groupobj.touched = val.touched this.groupobj.untouched = val.untouched this.groupobj.value = val.value
console.log(val)
for(let obj in val.controls){ for(let errobj in val.controls[obj].errors){ console.log(obj +" : "+ errobj) } } } }
<div style="margin-left: 50px;"> <form [formGroup]="myGroup" (ngSubmit)="onsubmit(myGroup)"> name <input type="text" [formControlName]="'name'" > <div *ngIf="names.invalid">invalid 有不满足的规则</div> <div *ngIf="names.valid">valid 满足所有规则</div> <div *ngIf="names.dirty">dirty 项目值被用户变更过</div> <div *ngIf="names.pristine">pristine 项目值未被用户变更过</div> <div *ngIf="names.touched">touched 被访问过</div> <div *ngIf="names.untouched">untouched 从未被访问过</div> <br>
telmax <input type="text" formControlName="telmax" > <br> <div *ngIf="telmax.invalid">长度不能大于3<br></div> <br>
telmin <input type="text" formControlName="telmin" ><br> <div *ngIf="telmin.invalid">长度不能小于3<br></div> <br>
telreq <input type="text" formControlName="telreq" ><br> <div *ngIf="telreq.invalid">不能未空<br></div> <br>
telpat <input type="text" formControlName="telpat" ><br> <div *ngIf="telpat.invalid">不符合入力规则<br></div>
<input type="submit" value="submit"> </form>
<pre> {{groupobj | json}} <br> {{data | json}} </pre> </div>
标签：relevant,val,get,myGroup,表单,groupobj,pc,angular 来源： https://www.cnblogs.com/sqcokb/p/15881677.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。