表单-angular

好人一生平安丶 發表於 2019-6-2 09:59:00

<img src="https://img2018.cnblogs.com/blog/1388665/201906/1388665-20190605065253569-282715819.png">
模板表单：
<div class="cnblogs_code">
<pre><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);
}</pre>
</div>
 例子：添加有多项的表单项
<img src="https://img2018.cnblogs.com/blog/1388665/201906/1388665-20190612160010177-1640200342.png">
<div class="cnblogs_code">
<pre><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" ="'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 ="{ span: 24, offset: 0 }" ="{ 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></pre>
</div>
<div class="cnblogs_code">
<pre>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));
}
}</pre>
</div>
 
<hr>
 
响应式表单：
import { ReactiveFormsModule } from '@angular/forms'
imports: [ ReactiveFormsModule ]
 例子：添加有单个项的表单项
<div class="cnblogs_code">
<pre><form ="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" ='i'/>
 <span (click)="removeItem(i)">删除</span>
 </div>
</div>
<span (click)="addItem()">添加</span>
<button type="submit">点我</button>
</form></pre>
</div>
<div class="cnblogs_code">
<pre>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);
}
}</pre>
</div>
 例子：添加有多项的表单项
 出现问题：1）xxx_{{ i }} 会报错  2）不知道如何初始化含radio的默认值
<div class="cnblogs_code">
<pre><form ="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 ="'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 ="{ span: 24, offset: 0 }" ="{ 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></pre>
</div>
<div class="cnblogs_code">
<pre>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);
}
}</pre>
</div>
 
<hr>
 
自定义响应式表单（解决表单提交非input类型数据,，多用于单选/多选）：
<div class="cnblogs_code">
<pre>// 引用组件： <app-thumb formControlName="avatar" ></app-thumb> // app-thumb组件： <div class="imgbox" *ngFor="let item of data;let i=index" (click)="ImgChange(i)" >11</div> </pre>
</div>
<div class="cnblogs_code">
<pre>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;
this.detailFun(this.selected);
console.log(this.selected);
}

}</pre>
</div>
 
 
<form></form> 
来源：https://www.cnblogs.com/yuyedaocao/p/10962054.html

頁: [1]

琼殿技术论坛's Archiver

表单-angular