zoukankan      html  css  js  c++  java
  • 临时

    import {Component, OnInit} from '@angular/core';
    import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';
    
    @Component({
      selector: 'app-reactived-form',
      templateUrl: './reactived-form.component.html',
      styleUrls: ['./reactived-form.component.css']
    })
    export class ReactivedFormComponent implements OnInit {
    
      public formModel: FormGroup;
      public fb: FormBuilder = new FormBuilder();
      constructor() {
    
    /*    this.formModel = this.fb.group({
          nickName: [''],
          emails: this.fb.array([['']]),
          passwordInfo: this.fb.group({
            password: [''],
            passwordConfirm: ['']
          })
        });*/
    
        this.formModel = new FormGroup({
          nickName: new FormControl(),
          emails: new FormArray([new FormControl(), new FormControl()]),
          passwordInfo: new FormGroup({
              password: new FormControl(),
              passwordConfirm: new FormControl()
            }
          )
        });
      }
      createUser() {
        let n = this.formModel.get('nickName') as FormControl;
        console.log(n.value);
      }
      addEmail() {
        let emails = this.formModel.get('emails') as FormArray;
        emails.push(new FormControl());
        console.log(this.formModel.value);
      }
      ngOnInit() {
      }
    
    }
    
    <form [formGroup]="formModel" (submit)="createUser()">
      <div>昵称:<input formControlName="nickName" pattern="[a-zA-Z0-9]"></div>
      <div>邮箱:
        <ul formArrayName="emails">
          <li *ngFor="let email of formModel.get('emails').controls; let i= index">
            <input [formControlName]="i">
          </li>
        </ul>
        <button (click)="addEmail()">添加email</button></div>
      <div [formGroup]="formModel.get('passwordInfo')">
        <div>密码:<input formControlName="password" type="password"></div>
        <div>确认密码:<input formControlName="passwordConfirm" type="password"></div>
      </div>
      <div>
        <button type="submit">注册</button>
      </div>
    </form>
    
    import {Component, OnInit} from '@angular/core';
    
    @Component({
      selector: 'app-template-form',
      templateUrl: './template-form.component.html',
      styleUrls: ['./template-form.component.css']
    })
    export class TemplateFormComponent implements OnInit {
    
      constructor() {
      }
    
      ngOnInit() {
      }
    
      createUser(values) {
        console.log('createUser');
      }
    }
    
    <form #myForm="ngForm" (ngSubmit)="createUser(myForm.value)">
      <div>昵称:<input ngModel name="nickname" pattern="[a-zA-Z0-9]"></div>
      <div>邮箱:<input ngModel name="email" type="email"></div>
      <div ngModelGroup="passwordInfo">
        <div>密码:<input ngModel name="password" type="password"></div>
        <div>确认密码:<input ngModel name="password" type="password"></div>
      </div>
      <div><button type="submit">注册</button></div>
    </form>
    
  • 相关阅读:
    通过PMP了
    VBA之自动建立连接
    从头学SQL Server2005之一:数据库引擎体系结构
    SMP、NUMA、MPP体系结构介绍【转】
    将Windows2003的RDP客户端管理应用于XP
    VBA中简单修改原有公式的宏
    各种Excel VBA的命令
    领导和管理的区别在哪里?【转】
    COM(VB/VBA/Script)利用服务标记调用WCF服务之四:使用配置文件
    2009年第一篇日志
  • 原文地址:https://www.cnblogs.com/yw0219/p/7795642.html
Copyright © 2011-2022 走看看