爲什麼表單驗證內部div不能在另一個div內工作？

Question

我有這樣的HTML模板：

<div class="ui raised segment"> 
    <h2 clas="ui header">Demo Form: with validations (explicit)</h2> 
    <form [formGroup]="myForm" 
     (ngSubmit)="onSubmit(myForm.value)" 
     class="ui form"> 
     <div class="field" 
      [class.error]="!sku.valid && sku.touched"> 
      <label for="skuInput">SKU</label> 
      <input type="text" 
       id="skuInput" 
       placeholder="SKU" [formControl]="sku"> 
      <div *ngIf="!sku.valid" 
       class="ui error message">SKU is invalid</div> 
      <div *ngIf="sku.hasError('required')" 
       class="ui error message">SKU is required</div> 
     </div> 

     <div *ngIf="!myForm.valid" 
      class="ui error message">Form is invalid</div> 

     <button type="submit" class="ui button primary">Submit</button> 
    </form> 
</div> 

兩個div S中div與class="field"內時id="skuInput"現場無效不會出現。

我已經把兩個div s放在最外面的div之外，它們按預期工作。

爲什麼會發生這種情況？

Answer 1

sku在您的模板中是不是你認爲它是;即它不是對你的表單控件的引用。

事實上，我的股票模板中出現了一些控制檯錯誤。

我們需要記住，我們使用無表格和比模板驅動的形式更加明確和直接引用的控制：

<div class="field" [class.error]="!myForm.controls.sku.valid && 
    myForm.controls.sku.touched"> 
    <label for="skuInput">SKU</label> 
    <input type="text" id="skuInput" 
       placeholder="SKU" formControlName="sku"> 
    <div *ngIf="!myForm.controls.sku.valid" 
       class="ui error message">SKU is invalid</div> 
    <div *ngIf="myForm.controls.sku.hasError('required')" 
       class="ui error message">SKU is required</div> 
</div> 

我也改變[formControl]這需要實際參考到表單控件的右側，以允許更好的外觀語法迴應您所使用的內容。

Plunkify