FormControl与FormControlname

前言

最近学习关于angular的系统的时候，忽然间启动单元测试时报错，

一开始我以为这是个小问题，可事情却没那么简单。

解决过程

自己先试了试，没有解决。我就去百度，
Cannot find name ‘FormControl’
找到一个思否的提问

看回答，很简单，就是缺少了引入 FormsModule模块，然后我就陷入了这样的思路错误。报错没有提示哪个文件，我就使用全局搜索找到所有使用过FormControl的v层对应的单元测试文件，加入 FormModule，但是全都试了一遍之后还是没有解决。这让我犯了难，又看了很多网上的解决办法，他们的思想几乎都统一在缺少 FormModule模块上。七搞八搞没有解决。这是我很头疼。
后来，我发现了他提示的一个陌生路径，他说在这个路径下的18151行找不到名字“FormCotnrol”，

我起初看到这个陌生路径，认为他是某个引入的的某个包的路径，引入的包里的内容怎么可能出错呢，我又没有去动过他。后来打开了它，他果然有红色提示，

可是我也想不明白他怎么会报错，我就先按照他提示的去改让我引入”@angular/forms”下的 FormControl，

我引入后报了新的错误。
这时我再也想不出解决办法了，我去问学长，学长看后也是不知怎么回事，他看了它的文件后让我把 FormControl改成 never，然后就都正常了。我又询问了其他小伙伴的文件，他们就是 never，

这个错误让我莫名其妙的，难道是我梦游整出来的错误？

FormControl与FormControlname

在网上查找的过程中也学会了知识，比如我们在项目中既用过FormControl，也用过FormControlname，二者使用事例如下。

FormControl
我们在v层中

<label for="name">名称：<input id="name" type="text" [formControl]="name"/></label>

对应c层

this.name = new FormControl('');

FormControlname
v层

<form (ngSubmit)="onSubmit()" [formGroup]="formGroup">  
 <label for="name">姓名：<input id="name" type="text" name="name" formControlName="name" /></label>  
 <label for="sno">学号：<input id="sno" type="text" name="sno" formControlName="sno" /></label>
</form>

对应c层

this.formGroup = new FormGroup({  
  name: new FormControl(''),  
  sno: new FormControl('')  
});

这里注意，FormControlname没有加[]，与formFroup组合使用。FormControl加了[],因为在对应的c层中有定义name: FormControl;
我们还可以进行转化
例如

<div>
  <input type="text" [formControl]="myForm.controls.name"/>
  <input type="text" [formControl]="myForm.controls.sno"/>
</div>

相当于

<div [formGroup]="myForm">
  <input type="text" formControlName="name"/>
  <input type="text" formControlName="sno"/>
</div>

结语

头疼了一天的bug竟然是由于一个不明所以原因造成的，bug还是要具体问题具体分析，

作者：小强Zzz

原文地址：https://segmentfault.com/a/1190000021706990

喜欢 0