입력 유효성 검사 후 KnockoutJS에 객체 추가

Question

객체를 관측 가능 객체에 추가하기 전에 사용자 입력의 유효성을 검사하고 싶습니다. 예를 들어 observable에 객체를 추가하기 전에 Quantity와 Price라는 두 개의 필드가있는 경우 사용자 입력의 유효성을 검사하려고합니다. 이 동작을 어떻게 수행 할 수 있습니까? 지금까지이

코드 : 사용자가 추가 버튼을 클릭 한 후

것은 그래서,이 오류 메시지가 있어야한다 :

self.productPriceAdd = function() { 
    var newPrice = { 
     Quantity: self.newProductPriceEntry.Quantity(), 
     Price: self.newProductPriceEntry.Price(), 
     ProductBarcode: self.productPrices().Barcode 
    } 
    self.productPrices().ProductSalePrices().push(newPrice); 
    self.productPrices().ProductSalePrices(self.productPrices().ProductSalePrices()); 
    self.newProductPriceEntry.Quantity(null); 
    self.newProductPriceEntry.Price(null); 
} 

사용자 인터페이스는 다음과 같이 somethig에 보이는 빈 필드마다 하나씩 표시됩니다.

내 HTML 코드 :

<!-- ko if: productPrices() --> 
<div class="col-md-4"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h2 class="panel-title"><b data-bind="text: productPrices().Name"></b></h2> 
    </div> 
    <table class="table"> 
     <tr> 
      <th> 
       @Html.DisplayName("Quantity") 
      </th> 
      <th> 
       @Html.DisplayName("Price") 
      </th> 
      <th></th> 
     </tr> 

     <tbody data-bind="foreach: productPrices().ProductSalePrices()"> 
      <tr> 
       <td> 
        <b data-bind="text: Quantity"></b> 
       </td> 
       <td> 
        <b data-bind="text: Price"></b> 
       </td> 
       <td> 
        <a href="#" data-bind="click: $parent.productPriceRemove" class="btn btn-defaul">Remove</a> 
       </td> 
      </tr> 
     </tbody> 

     <tbody data-bind="with: newProductPriceEntry"> 
      <tr> 
       <td> 
        <input type="number" class="form-control" data-bind="value: Quantity " placeholder="Quantity"> 
       </td> 
       <td> 
        <input type="number" step="0.01" class="form-control" data-bind="value: Price " placeholder="Price"> 
       </td> 
       <td> 
        <a href="#" data-bind="click: $parent.productPriceAdd" class="btn btn-defaul">Add</a> 
       </td> 
      </tr> 
     </tbody> 

    </table> 
</div> 
<a href="#" data-bind="click: productPriceSave" class="btn btn-defaul">Save</a> 

Answer 1

은 녹아웃 유효성 검사에서보세요. 유효성 검사 프로세스를 간소화하는 녹아웃 플러그인입니다.

https://github.com/Knockout-Contrib/Knockout-Validation

Answer 2

그래서, 내가 찾은 해결책은 수량 및 가격 필드에 잘못된 값을 확인하는 것입니다. false, "", undefined 및 null과 같은 유형이 false로 평가됩니다. 그래서, 전체 작업 코드 :

self.productPrices = ko.observable(); 
self.newProductPriceEntry = { 
    Quantity: ko.observable("").extend({ required: true }), 
    Price: ko.observable("").extend({ required: true }) 
} 

self.productPriceAdd = function() { 
    var newPrice = { 
     Quantity: self.newProductPriceEntry.Quantity(), 
     Price: self.newProductPriceEntry.Price(), 
     ProductBarcode: self.productPrices().Barcode 
    } 

    if (newPrice.Price && newPrice.Quantity) { 
     self.productPrices().ProductSalePrices().push(newPrice); 
     self.productPrices().ProductSalePrices(self.productPrices().ProductSalePrices()); 
    } 
    self.newProductPriceEntry.Quantity(null); 
    self.newProductPriceEntry.Price(null); 
} 

그래서 내가 무엇을하고 있는가하면 조건이 true 인 경우에만 관찰에 물체를 밀어하는 것입니다. 그런 다음 observables를 null로 설정하여 필드를 지 웁니다.

숫자 부분 유효성 확인을 위해 번 HTML5 속성을 사용했습니다.