Angular完成表单练

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

HTML代码:

  

    

      姓名:
      
    
    

      性别:
      男
      女
    
    

      城市:
      // 这里加了 ngModel 实现双向绑定， 如果下列option和ts中给出的值相同， 就类似于selected 功能
      
        
          {{ item }}
        
      
    
    

      兴趣爱好:
      // 和上面的selcet 同理， 加了ngModel实现双向绑定， true 为选中， false 未选择
      // 在这里id 和 for 要用[] 括起来， 否则，他只能识别字符串 不会用作变量
      
        {{ item.title }}
      
    
    

      备注:
      
    
  
  获取表单的值

  
  // PIPE管道, 显示为转换。Json便于查看的数据格式, 如果没有添加管道， 输出就是 Object, Object
  {{ peopleInfo | json }}

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;
}

如果你想掌握实际操作，可以更牢固地记住它 你得敲几下