Đặt thuộc tính bắt buộc cho một yếu tố đầu vào nếu nó không bị ẩn

Question

Tôi đang làm việc trên biểu mẫu động bằng angular.js. Trường nhập liệu

<div ng-show="condition()"> 
    <input type="text" name="field" required> 
</div> 

Nếu điều kiện() trả về false, trường nhập sẽ không được hiển thị. Nhưng bằng cách nhấp vào nút gửi, tôi sẽ nhận được trên chrome, thông điệp:

An invalid form control with name='field' is not focusable. 

Vâng, một giải pháp là, sử dụng ng-yêu cầu:

<div ng-show="condition()"> 
    <input type="text" name="field" ng-required="condition()"> 
</div> 

Vâng, ở đây tôi có để lặp lại mã, sử dụng điều kiện() nhiều lần.

Nó trở thành xấu, khi bạn có thể gói gọn ng-show của:

<div ng-show="condition1()"> 
    <div ng-show="condition2()"> 
     <input type="text" name="field" 
      ng-required="condition1() && condition2()"> 
    </div> 
</div> 

Có cách nào tốt hơn, thẻ bắt buộc phải có mặt ở đó khi đầu vào là có thể nhìn thấy, và không, nếu nó ẩn.

Answer 1

Thay vì sử dụng ng-show, sử dụng ng-if, vì khi bạn sử dụng ng-show thì phần tử đó vẫn là một phần của DOM.

một cái gì đó như thế này:

<div ng-if="condition()"> 
    <input type="text" name="field" required> 
</div> 

Bằng cách này bạn sẽ không nhận được lỗi

An invalid form control with name='field' is not focusable. 

Answer 2

Tôi khuyên bạn nên sử dụng ng-if để xóa phần tử khỏi biểu mẫu hoặc bạn có thể nói DOM nếu điều kiện không được satiesfied. mã của bạn sẽ trở thành như

<div> 
    <div> 
     <input type="text" name="field" 
      ng-if="condition1() && condition2()" required> 
    </div> 
</div> 

Answer 3

Một tùy chọn là sử dụng biến thay vì gọi hàm.

<div ng-show="condition1()"> 
<div ng-show="condition2()"> 
    <input type="text" name="field" 
     ng-required="isRequired"> 
</div> 

và trong điều khiển của bạn, bạn có thể thiết lập các biến isRequired chức năng đúng hay sai trong condition1 của bạn() và/hoặc condition2().

function myController($scope){ 
    $scope.isRequired = false; // initialize it 

    $scope.condition1 = condition1; 
    $scope.condition2 = condition2; 

    function condition1(){ 
    var returnValue = false; 
    // Do some testing that sets returnValue true or false  
    $scope.isRequired = returnValue; 
    return returnValue; 
    } 

    function condition2(){ 
    var returnValue = false; 
    // Do some testing that sets returnValue true or false  
    $scope.isRequired = returnValue; 
    return returnValue; 
    } 
} 

Rõ ràng đây không phải là mã chống đạn. Nhưng đó là một sự khởi đầu.