zoukankan      html  css  js  c++  java
  • angular表单的使用

    html:

    <h2>人员登记系统</h2>
    <div class="people_list">
        <ul>
            <li>姓名:<input type="text" [(ngModel)]="peopleInfo.username" class="form_input" /></li>
            <li>
                性别:
                <input type="radio" value="1" name="sex" [(ngModel)]="peopleInfo.sex" id="sex1" /><input type="radio" value="2" name="sex" [(ngModel)]="peopleInfo.sex" id="sex2" /></li>
            <li>
                城市:
                <select name="city" id="city" [(ngModel)]="peopleInfo.city">
                    <option [value]="item" *ngFor="let item of peopleInfo.cityList;let key=index">{{item}}---{{key}}
                    </option>
                </select>
            </li>
            <li>爱好:
                <span *ngFor="let item of peopleInfo.hobby;let key=index">
                    <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked" /><label>{{item.title}}</label>
                </span>
            </li>
            <li>
                备注:
                <textarea name="mark" [(ngModel)]="peopleInfo.mark"></textarea>
            </li>
        </ul>
        <div>
            {{peopleInfo|json}}
        </div>
        <button (click)="doSubmit()">点击获取数据</button>
    </div>

    ts:

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-form',
      templateUrl: './form.component.html',
      styleUrls: ['./form.component.scss']
    })
    export class FormComponent implements OnInit {
      public peopleInfo:any={
        username:'',
        sex:'1',
        cityList:['北京','上海','深圳'],
        city:'北京',
        hobby:[
          {
            title:'吃饭',
            checked:false
          },{
            title:'睡觉',
            checked:false
          },{
            title:'敲代码',
            checked:true
          }
        ],
        mark:''
      }
      constructor() { }
    
      ngOnInit() {
      }
      doSubmit(){
        console.log(this.peopleInfo.username);
      }
    
    }

    app.module.ts

    import{FormsModule} from '@angular/forms';
      imports: [
        FormsModule
      ],
  • 相关阅读:
    种类并查集——带权并查集——POJ1182;HDU3038
    【并查集之判断连通无环图】
    jmeter响应断言通过,结果树中却显示红色
    jmeter获取登录token
    jmeter查看结果树中响应数据Unicode转换成中文
    jmeter分布式测试
    jmeter连接mysql测试
    jmeter集合点
    jmeter之参数化
    jmeter之断言(3种)
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/12284047.html
Copyright © 2011-2022 走看看