表单-angular
模板表单:
<form #myform="ngForm" (ngSubmit)="onsubmit(myform.value)" >
<div ngModelGroup="userInfo">
<input ngModel name="username" />
<input ngModel name="password" />
</div>
<button type="submit">点我</button>
</form>
onsubmit(value){
console.log(value);
}
例子:添加有多项的表单项
<form #myform ="ngForm" (ngSubmit)="onsubmit(myform.value)"> <div style="width: 50%"> <div nz-row nzGutter="4" *ngFor="let item of partners;let i = index"> <div nz-col nzSpan="8"> <nz-form-item nzFlex> <nz-form-label>姓名</nz-form-label> <nz-form-control> <input nz-input placeholder="placeholder" name="username_{{i}}" [(ngModel)]="item.username"/> </nz-form-control> </nz-form-item> </div> <div nz-col nzSpan="8"> <nz-form-item nzFlex> <nz-form-label>手机号</nz-form-label> <nz-form-control> <input nz-input placeholder="placeholder" name="tel_{{i}}" [(ngModel)]="item.tel"/> </nz-form-control> </nz-form-item> </div> <div nz-col nzSpan="8"> 性别: <nz-radio-group [(ngModel)]="item.radioValue" [nzButtonStyle]="'solid'" name="Gender_{{i}}"> <label nz-radio-button nzValue="1">男</label> <label nz-radio-button nzValue="0" >女</label> </nz-radio-group> </div> </div> <nz-form-item> <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }"> <button nz-button nzType="dashed" style="width:60%" (click)="addField($event)"> <i nz-icon type="plus"></i> 添加表单项 </button> </nz-form-control> </nz-form-item> <button type="submit">提交</button> </div> </form>
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormArray } from '@angular/forms'; @Component({ selector: 'app-card-whole-consume', templateUrl: './card-whole-consume.component.html', styleUrls: ['./card-whole-consume.component.css'] }) export class CardWholeConsumeComponent implements OnInit { partners = []; partnersObj = []; radioValue = 0; constructor() { } ngOnInit() { } addField(e) { this.partners = ([...this.partners ,{username:'',tel:'',radioValue:'1'}]); } onsubmit(val) { console.log('val====' + JSON.stringify(val)); } }
响应式表单:
import { ReactiveFormsModule } from '@angular/forms'
imports: [ ReactiveFormsModule ]
例子:添加有单个项的表单项
<form [formGroup]="formGroup" (submit)="onsubmit()"> <input formControlName="username" /> <input formControlName="password" /> <div formGroupName="timeGroup"> <input formControlName="from" /> <input formControlName="to" /> </div> <div formArrayName="emails"> <div *ngFor="let item of this.formGroup.get('emails').controls;let i = index"> <input type="text" [formControlName]='i'/> <span (click)="removeItem(i)">删除</span> </div> </div> <span (click)="addItem()">添加</span> <button type="submit">点我</button> </form>
import { Component, OnInit } from '@angular/core'; import { FormBuilder } from '@angular/forms'; @Component({ selector: 'app-index', templateUrl: './index.component.html', styleUrls: ['./index.component.sass'] }) export class IndexComponent implements OnInit { formGroup; constructor(private router:Router,private formBuilder:FormBuilder) { this.formGroup = formBuilder.group({ username:'xiaohua', password:'123456', timeGroup: formBuilder.group({ from:'', to:'' }), emails:formBuilder.array([ 'xxxx', 'uyyy' ]) }) } onsubmit(){ console.log(this.formGroup.value); }
//增加input项 addItem(){ const emails = this.formGroup.get('emails') as FormArray; emails.push(this.formBuilder.control([''])); }
//删除input项 removeItem(index){ const emails = this.formGroup.get('emails') as FormArray; emails.removeAt(index); } }
例子:添加有多项的表单项
出现问题:1)xxx_{{ i }} 会报错 2)不知道如何初始化含radio的默认值
<form [formGroup]="myform"> <div style="width: 50%" formArrayName="usersArray"> <div nz-row nzGutter="4" *ngFor="let item of this.myform.get('usersArray').controls;let i = index;"> <div nz-col nzSpan="8"> <nz-form-item nzFlex> <nz-form-label>姓名</nz-form-label> <nz-form-control> <input nz-input placeholder="placeholder" formControlName='username_{{i}}'/> </nz-form-control> </nz-form-item> </div> <div nz-col nzSpan="8"> <nz-form-item nzFlex> <nz-form-label>手机号</nz-form-label> <nz-form-control> <input nz-input placeholder="placeholder" formControlName='tel_{{i}}'/> </nz-form-control> </nz-form-item> </div> <div nz-col nzSpan="8"> 性别: <nz-radio-group [nzButtonStyle]="'solid'" formControlName='Gender_{{i}}'> <label nz-radio-button nzValue="1">男</label> <label nz-radio-button nzValue="0" >女</label> </nz-radio-group> </div> </div> <nz-form-item> <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }"> <button nz-button nzType="dashed" style="width:60%" (click)="addField()"> <i nz-icon type="plus"></i> 添加表单项 </button> </nz-form-control> </nz-form-item> <button type="submit">提交</button> </div> </form>
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormArray } from '@angular/forms'; @Component({ selector: 'app-card-whole-consume', templateUrl: './card-whole-consume.component.html', styleUrls: ['./card-whole-consume.component.css'] }) export class CardWholeConsumeComponent implements OnInit { partners = []; partnersObj = []; myform; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.myform = this.formBuilder.group({ usersArray: this.formBuilder.array(['']) }); } addField() { const arr = this.myform.get('usersArray') as FormArray; arr.push(this.formBuilder.control([''])); } onsubmit(val) { console.log(this.myform.value); } }
自定义响应式表单(解决表单提交非input类型数据,,多用于单选/多选):
// 引用组件:
<app-thumb formControlName="avatar" ></app-thumb>
// app-thumb组件:
<div class="imgbox" *ngFor="let item of data;let i=index" (click)="ImgChange(i)" >11</div>
import { Component, OnInit , forwardRef } from '@angular/core';
import { ControlValueAccessor , NG_VALUE_ACCESSOR , NG_VALIDATORS } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-thumb',
templateUrl: './thumb.component.html',
styleUrls: ['./thumb.component.sass'],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef( () => ThumbComponent ) ,
multi: true
}]
})
export class ThumbComponent implements ControlValueAccessor {
form;
constructor(formBuilder: FormBuilder) {
this.form = formBuilder.group({
thumb: []
});
}
data = ['niua','sdsds'];
selected ;
detailFun: (_: any) => {};
writeValue(obj: any):void {
this.selected = obj;
}
registerOnChange(fn: any):void {
this.detailFun = fn;
}
registerOnTouched(fn: any):void {
}
ImgChange(i) {
this.selected = this.data[i];
this.detailFun(this.selected);
console.log(this.selected);
}
}