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仍是要具體問題具體分析，