angular 表单

angular表单知识点 - 前端路上的小兵 - 博客园 (cnblogs.com) 

 

Angular中响应式表单 FormBuilder、FormControl 、FormGroup、FormArray、setControl、setValue用法总结_S筱潇S四维Smile-CSDN博客_angular formcontrol

 

 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>