Angular完成表单练习

直接上代码， 一些我练习时遇到的问题我会 直接备注

HTML代码:

<div class="people_list">
  <ul>
    <li>
      姓名:
      <input type="text" [(ngModel)]="peopleInfo.username" class="inputForm" />
    </li>
    <li>
      性别:
      <input
        type="radio"
        value="1"
        id="sex1"
        [(ngModel)]="peopleInfo.sex"
      /><label for="sex1">男</label>
      <input
        type="radio"
        value="2"
        [(ngModel)]="peopleInfo.sex"
        id="sex2"
      /><label for="sex2">女</label>
    </li>
    <li>
      城市:
      // 这里加了 ngModel 实现双向绑定， 如果下列option和ts中给的值相同， 就类似于selected 功能
      <select id="city" [(ngModel)]="peopleInfo.city">
        <option [value]="item" *ngFor="let item of peopleInfo.cityList">
          {{ item }}
        </option>
      </select>
    </li>
    <li>
      兴趣爱好:
      // 和上面的selcet 同理， 加了ngModel实现双向绑定， true 为选中， false 就是未选中
      // 还有这里的id 和 for 要用[] 括起来， 要不他只会识别字符串 不会当作变量使用
      <span *ngFor="let item of peopleInfo.hobby; let key = index">
        <input
          type="checkbox"
          [id]="'check' + key"
          [(ngModel)]="item.checked"
          [value]="item.title"
        /><label [for]="'check' + key">{{ item.title }}</label>
      </span>
    </li>
    <li>
      备注:
      <textarea id="mark" name="mark" [(ngModel)]="peopleInfo.mark"></textarea>
    </li>
  </ul>
  <button (click)="doSubmit()">获取表单的值</button>

  <pre>
  // PIPE管道, 显示出来转换为Json数据格式方便观看, 如果不加管道， 输出就是 Object, Object
  {{ peopleInfo | json }}

</pre
  >
</div>

TypeScirpt 代码：

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: '',
    cityList: ['深圳', '上海', '北京'],
    city: '北京',
    hobby: [
      {
        title: '吃饭',
        checked: false,
      },
      {
        title: '睡觉',
        checked: false,
      },
      {
        title: '敲代码',
        checked: true,
      },
    ],
    mark: '',
  };

  constructor() {}

  ngOnInit(): void {}
  doSubmit(): void {
    console.log(this.peopleInfo);
  }
}

SCSS代码：

.people_list {
  width: 400px;
  margin: 100px auto;
  padding: 200px;
  border: 1px solid #eee;
}
li {
  height: 50px;
  line-height: 50px;
  .inputForm {
    height: 24px;
    width: 260px;
  }
}
button {
  text-align: center;
  width: 150px;
  height: 30px;
  float: right;
  margin-top: 40px;
}

动手实践练习才能记住的更牢固，如果大家想掌握 就得实际敲几遍