表单 - 源码之家

模板表单：

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

}

表单

相关推荐