模板表單中的複選框列表的驗證（不是活動表單）Angular 2

如何驗證檢查是否從Angular 2模板表單中的複選框列表中選擇了至少1個複選框？模板表單中的複選框列表的驗證（不是活動表單）Angular 2

HTML代碼。

<div class="form-control" style="max-height: 300px; overflow: auto"> 
     <div *ngFor="let item of items" class="checkbox"> 
      <label for="{{item.id}}"> 
       <input type="checkbox" value="{{item.id}}" required id="{{item.id}}" [(ngModel)]="item.isSelected" /> 
       <span class="text-body">{{item.name}}</span> 
      </label> 
     </div> 
    </div> 
    <div *ngIf="!isAtleastOneItemSelected()" class="alert alert-error"> 
     Select at least one item 
    </div>

組件代碼。

public isAtleastOneItemSelected() { 
    const selectedItems = this.items.filter((item) => item.isSelected); 
    if (selectedItems.length > 0) { 
     return true; 
    } else { 
     return false; 
    } 
}

我已經檢查了執行此操作的無功表單方式here。所以，想要檢查我們如何在模板表單中做到這一點。使用我上面粘貼的代碼，事情工作正常，但在頁面加載錯誤消息顯示，因爲沒有檢查髒或觸摸那裏。我被這個問題困住了。

任何幫助，將不勝感激。

謝謝。

來源

2017-08-15 RKS

我也是，我花了這一段時間，這似乎是不可能:(form.valid始終是真實的 – Vega

看看這個，你需要適應：

<div *ngFor="let item of items; let i = index" class="checkbox"> 
     <label for="{{item.id}}"> 
      <input type="checkbox" value="{{item.id}}" required id="{{item.id}}" [(ngModel)]="item.isSelected" (change)="CheckBoxChanged(i,$event)"/> 
      <span class="text-body">{{item.name}}</span> 
     </label> 
</div> 
    <div [hidden]="isAtleastOneItemSelected()" class="alert alert-error"> 
     Select at least one item 
    </div>

把你的檢驗邏輯，在這裏...：

CheckBoxChanged(i,e){ 
    console.log(i); 
    if (e.target.checked) 
     console.log("checked"); 
    else 
     console.log("unchecked"); 
}

來源

2017-08-15 20:42:11 sancelot

這是如何防止越來越顯示初始錯誤信息即當控制不髒，摸不着？ – RKS

我更新的代碼使用隱藏屬性的DIV – sancelot

的儘管如此，在初始頁面加載，此錯誤消息仍然顯示爲無關聯的模型將被檢查 – RKS

嗯，我在這裏看到兩個可行的方案。我會選擇第一個，因爲我會建議避免使用模板中的任何方法，因爲您無法限制該方法何時發生以及發生的頻率。特別是如果你有一種以某種方式修改數據的方法，那麼即使這個方法與實際的複選框沒有任何關係，它也會被解僱。稍後查找樣本。

因此，我要做的，就是改變

*ngIf="!isAtleastOneItemSelected()"

檢查，而不是一個變量：

*ngIf="nonChecked"

，並有一些類型的改變事件的被點擊複選框時，其觸發一些方法，例如：

check() { 
    const selectedItems = this.items.filter((item) => item.isSelected === true); 
    if (selectedItems.length > 0) { 
    this.nonChecked = false; 
    } else { 
    this.nonChecked = true; 
    }  
}

現在只有當觸摸複選框時纔會觸發此功能。

另一種選擇我看到的，如果你想保持類似的設置，是包裝的複選框在formgroup當組被觸摸，然後才顯示錯誤消息，如果沒有項目檢查觀看。所以，你想包的複選框一組內：

<div ngModelGroup="checkboxes"> 
    <!-- .... --> 
</div>

，然後你可以這樣做：

<div *ngIf="!isAtleastOneItemSelected() && f.controls?.checkboxes?.dirty"> 
    Select at least one item 
</div>

其中f是形式的名稱。但正如前面提到的，這將觸發更改檢測並在DOM中執行其他任何操作。下面是這個解決方案的一個例子，我們在DOM中只有一個其他的字段（參見控制檯），所以如果你有很多東西在繼續，我會建議第一個解決方案:)但是無論哪種方式，都可以！

http://plnkr.co/edit/VuLNR8H3lasFoK7mRDlG?p=preview

來源

2017-08-16 09:40:46 Alex

模板表單中的複選框列表的驗證（不是活動表單）Angular 2

回答

相關問題