Angular 8 中Dom以及表单操作

实例一

form.component.html：

<h2>人员登记系统</h2>

<div class="people_list">

  <ul>

    <li>姓 名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input" /></li>

    <li>性 别：<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>    

    城 市：

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

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

  <pre>

    {{peopleInfo | json}}

  </pre>

</div>

form.component.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:'2',

    cityList:['北京','上海','深圳'],

    city:'上海',

    hobby:[{

          title:'吃饭',

          checked:false

      },{

            title:'睡觉',

            checked:false

        },{

          title:'敲代码',

          checked:true

      }],

      mark:''

  }

  constructor() { }

 

  ngOnInit() {

  }

 

  doSubmit(){

    /*   

    jquery  dom操作

      <input type="text" id="username" />

      let usernameDom:any=document.getElementById('username');

      console.log(usernameDom.value);   

    */

    console.log(this.peopleInfo);

  }

}

2、实例二

search.component.html：

<div class="search">

    <input type="text" [(ngModel)]="keyword" />  <button (click)="doSearch()">搜索</button>

    <hr>   

    <ul>

      <li *ngFor="let item of historyList;let key=index;">{{item}}   ------ <button (click)="deleteHistroy(key)">X</button></li>

    </ul>

</div>

search.component.ts：

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

@Component({

  selector: 'app-search',

  templateUrl: './search.component.html',

  styleUrls: ['./search.component.scss']

})

export class SearchComponent implements OnInit {

  public keyword:string;

  public historyList:any[]=[];

  constructor() { }

 

  ngOnInit() {   

  }

 

  doSearch(){

    if(this.historyList.indexOf(this.keyword)==-1){

      this.historyList.push(this.keyword);

    }   

    this.keyword='';   

  }

 

  deleteHistroy(key){

      alert(key);

      this.historyList.splice(key,1);

  }

}

todolist.component.html：

<h2>todoList</h2>

<div class="todolist">

    <input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />

    <hr>

    <h3>待办事项</h3>   

    <ul>

      <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">       

       <input type="checkbox" [(ngModel)]="item.status" />  {{item.title}}   ------ <button (click)="deleteData(key)">X</button>     

      </li>

    </ul>

    <h3>已完成事项</h3>

    <ul>

        <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">         

         <input type="checkbox" [(ngModel)]="item.status" />  {{item.title}}   ------ <button (click)="deleteData(key)">X</button>       

        </li>

      </ul>

</div>

todolist.component.ts：

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

@Component({

  selector: 'app-todolist',

  templateUrl: './todolist.component.html',

  styleUrls: ['./todolist.component.scss']

})

export class TodolistComponent implements OnInit {

  public keyword:string;

  public todolist:any[]=[];

  constructor() { }

  ngOnInit() {

  }

  doAdd(e){   

    if(e.keyCode==13){       

        if(!this.todolistHasKeyword(this.todolist,this.keyword)){

          this.todolist.push({

            title:this.keyword,

            status:0                   //0表示代办事项  1表示已完成事项

          });

          this.keyword='';

        }else{

          alert('数据已经存在');

          this.keyword='';

        }

     }   

  }

 

  deleteData(key){

    this.todolist.splice(key,1);

  }

 

  //如果数组里面有keyword返回true  否则返回false

  todolistHasKeyword(todolist:any,keyword:any){

    //异步  会存在问题

    // todolist.forEach(value => {

    //   if(value.title==keyword){

    //       return true;

    //   }

    // });

    if(!keyword) return false;

    for(var i=0;i<todolist.length;i++){

      if(todolist[i].title==keyword){

          return true;

      }

    }

    return false;

  }

}