angular6 表单学习

模板页面

<h2>人员登记系统</h2>
<div class="people_list">
  <ul>
    <li>姓 名:<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input"/></li>
    <li>性 别:
        <!-- peopleInfo.sex的值与value的值相等,就是选中的状态 -->
      <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> <label for="sex1"></label>   
      <input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"> <label for="sex2"></label>
    </li>
    <li>
      城 市:
      <!-- peopleInfo.city与option选中的值相等就是选中的状态 -->
      <select name="city" id="city" [(ngModel)]="peopleInfo.city">
        <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
      </select>
    </li>
    <li>
      爱 好:
      <span *ngFor="let item of peopleInfo.hobby;let key=index;">
          <!-- checkbox选中item.checked值为true,checkbox选中item.checked值为false -->
            <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"/> <label [for]="'check'+key"> {{item.title}}</label>
            &nbsp;&nbsp;
        </span>
    </li>
    <li>
      备 注:
      <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
    </li>
  </ul>
  <button (click)="doSubmit()" class="submit">获取表单的内容</button>
  <br>
  <br>
  <pre>
    {{peopleInfo | json}}
  </pre>
</div>

逻辑typescript

import {Component, OnInit} from '@angular/core';

@Component({
  selector: '.app-formdemo',
  templateUrl: './formdemo.component.html',
  styleUrls: ['./formdemo.component.scss']
})
export class FormdemoComponent implements OnInit {
  public peopleInfo: any = {
    username: '',
    sex: '2',
    cityList: ['北京', '上海', '深圳'],
    city: '上海',
    hobby: [{
      title: '吃饭',
      checked: false
    }, {
      title: '睡觉',
      checked: false
    }, {
      title: '敲代码',
      checked: true
    }],
    mark: ''
  };

  constructor() {
  }

  ngOnInit() {
  }

  doSubmit() {
    console.log(this.peopleInfo);
  }

}

定义对象

没有更多推荐了,返回首页