模板表单:

<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);
} }

表单-angular的更多相关文章

  1. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  2. Angular表单验证

    novalidate   去掉html5自带的验证 ng-minlength    规定输入文本的最小长度 ng-maxlength    规定输入文本的最大长度 ng-submit  接收一个方法名 ...

  3. angular表单

    angular的表单,点击确定进行创建,支持批量创建,表单验证有样式提醒; <!DOCTYPE html> <html lang="en"> <hea ...

  4. angular中的表单验证

    angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...

  5. angular学习的一些小笔记(中)之表单验证

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...

  6. 简单的angular表单验证指令

    <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...

  7. Angular.js表单以及与Bootatrap的使用

    首先从angular.js的目录开始,如下图,知道了我们要学什么,然后再开始有目的的学习与对比. 1.从表达式开始: ng-app指令初始化一个 AngularJS 应用程序. ng-init指令初始 ...

  8. activiti自定义流程之整合(二):使用angular js整合ueditor创建表单

    注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义 ...

  9. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

随机推荐

  1. Go Int转string几种方式性能测试

    Go Int转string几种方式性能测试 - 贤冰的博客 - CSDN博客 https://blog.csdn.net/flyfreelyit/article/details/79701577

  2. 【Spring】---【IOC入门案例】

    第一步:导入Jar包 第二步:创建类,在类里面创建方法 public class User { public void add(){ System.out.println("-------- ...

  3. java jna 调用windows动态链接库

    import com.sun.jna.Library; import com.sun.jna.Native; import com.sun.jna.Platform; import com.sun.j ...

  4. 【Airtest】Airtest中swipe方法兼容不同分辨率的解决方法

    使用Airtest中swipe方法由于不同分辨率的手机上滑动的坐标位置不同,所以想要兼容所有的手机,仅仅靠固定坐标就会出现问题 想要兼容所有的手机,可以按照如下思路进行 1.首先获取手机的分辨率,可以 ...

  5. 【ABAP系列】SAP ABAP 开发中的SMARTFORMS 参数

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 开发中的SMA ...

  6. 创建一个项目并在GitHub上发出拉取请求

    1.第一步:创建存储库 创建新存储库: New repository 命名存储库 写一个简短的描述 选择使用自述文件初始化此存储库 2.第二步:创建一个分支 创建一个新分支 转到新的存储库hello- ...

  7. Vim常用的功能命令

    一.编辑 查看行号     :set nu 删除一整行   dd 删除1到10行     :1,10d 删除所有内容     dG 当前行下插入一空行   o 撤销改动    u 查看当前行信息    ...

  8. netstat -anop|more 查看网络队列

    nux下netstat --timers / -o详解及keepalive相关 第一列,一般有一下几种状态: keepalive - #表示是keepalive的时间计时 on - #表示是重发(re ...

  9. 深入IO 想学必看!受益匪浅哦~

    一:IO流概述 IO流简单来说就是Input和Output流,IO流主要是用来处理设备之间的数据传输,Java对于数据的操作都是通过流实现,而Java用于操作流的对象都在IO包中. 分类: 按操作数据 ...

  10. 记一次有趣的JsonFormat不生效问题

    dto中使用了JsonFormat注解,如图 然后再序列化时 objectMapper.writeValueAsString(printReceBillVO) 始终值是一个Long,最后发现是包引用错 ...