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>
    
  • 相关阅读:
    面向对象
    tomcat启动时的java_home和jre_home错误
    C#获取当前程序运行路径的方法集合(转)
    Windows Media Player 打不开怎么办
    CGI/MIME/servlet术语解释
    HTTP 无法注册 URL http://+:8000/。进程不具有此命名空间的访问权限
    使用QuartZ.net来做定时计划任务 ; 值不能为 null。 参数名: assemblyString
    cz.msebera.android.httpclient.conn.ConnectTimeoutException: Connect to /192.168.23.1:8080 timed out(Android访问后台一直说链接超时)
    Java的位运算符——&0xFF的运算与讲解
    android+myeclipse+mysql自定义控件下拉框的数据绑定
  • 原文地址:https://www.cnblogs.com/yw0219/p/7795642.html
Copyright © 2011-2022 走看看