Web前端最全Angular权威教程之表单篇_angulario 表单布局(2)，腾讯前端开发面试

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

//新建一个FormControl并将Nate传入，此时nameControl中已经带有Nate
let nameControl = new FormControl("Nate"); 
 
let name = nameControl.value; // 运用.value，此时name应为Nate
 
// 现在我们可以用方法调用此时对象的状态
nameControl.errors // -> StringMap<string, any> of errors 
nameControl.dirty  // -> false 
nameControl.valid  // -> true

根据颜色与之前的描述进行对应即可：

FormGroup

管理多个FormControl，提供总包接口(wrapper interface)

let personInfo = new FormGroup({     
firstName: new FormControl("Nate"),     
lastName: new FormControl("Murray"),     
zip: new FormControl("90210") 
})

FormGroup和FormControl都是继承自AbstractControl，所以调用的方法都是一致的，只是group是control的一个集合而已。

personInfo.value; // -> { 
//   firstName: "Nate", 
//   lastName: "Murray", 
//   zip: "90210" 
// } 
 
// now we can query this control group for certain values, which have sensible 
// values depending on the children FormControl's values: 
personInfo.errors // -> StringMap<string, any> of errors 
personInfo.dirty  // -> false 
personInfo.valid  // -> true // etc.

两种使用表单的方式

import {   FormsModule,   ReactiveFormsModule } from '@angular/forms'; 
 
// farther down... 

@NgModule({   
declarations: [     
FormsDemoApp,     
DemoFormSku,     
// ... our declarations here ], 
imports: [     
BrowserModule,     
FormsModule,         // <-- add this 
ReactiveFormsModule  // <-- and this 
],   
bootstrap: [ FormsDemoApp ] 
}) 
class FormsDemoAppModule {} 

使用FormsModule

• ngModel
• NgForm

使用ReactiveFormsModule

• formControl
• ngFormGroup

制作一个简易的表单

form 和NgForm

当我们导入FormsModule的时候，NgForm就会被自动附加到视图中所有的标签上。
提供了两个重要的功能：
一个名叫ngForm的FormGroup对象(即FormControl的集合)
一个输出事件ngSubmit

  <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" >

#f=“ngForm” 这是一个创建局部变量的方法，格式为#xxx=something，此处的ngForm是由NgForm中导出 的

意义解读：当提交表单时，启动onSubmit方法，并且将ngForm中的value作为值传入

   <div class="field">         
   <label for="skuInput">SKU</label>         
   <input type="text"   id="skuInput"   placeholder="SKU"  name="sku" ngModel>       
   </div> 

这里指定了一个不带属性的ngModel 当使用不带属性的ngModel时

import { Component } from '@angular/core'; 
 
@Component({   
selector: 'demo-form-sku', 
template: ` 


### JavaScript

* js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

* 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

* Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

* JS常见的dom操作api

* 解释一下事件冒泡和事件捕获

* 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

* 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

* this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

* call，apply，bind

* 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

* 创建对象的多种方式

* 实现继承的多种方式和优缺点

* new 一个对象具体做了什么

* 手写Ajax，XMLHttpRequest

* 变量提升

* 举例说明一个匿名函数的典型用例

* 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

* attribute和property的区别

* document load和document DOMContentLoaded两个事件的区别

* JS代码调试  

* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

  ![](https://img-blog.csdnimg.cn/img_convert/a69e7b92af546ecaedf148f129bfef2b.png)