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>