Açısal ng gerekli değil Özel yönergeyle çalışma

Question

Formumdaki girdileri doğrulamak için Angularjs sürüm 1.5 kullanıyorum.

• tüm giriş doğrulamak için kullanılan olarak gerekli ng onun bir açılan hale özel bir yönergesi ile çalışma, ancak

gerekli. Birleşik giriş, kendisine geçirilen parametreye göre öğeleri 'listId' olarak alır. Ardından, ng-repeat kullanarak 'lookupItems' üzerinde yineleme yapar. Sanırım bir şey eksik, ngModel gibi. Neden ve nasıl uygulanmalı?

açılan yönergesi:

app.directive('combo', function($http) { 
    return { 
     restrict: 'AE', 
     template: '<div class="input-group"> <select ng-model="selectedItem">' + 
      '<option ng-repeat="option in lookupItems" value={{option.ListValueID}}>{{option.Translation.Value}}</option></select>' + 
      ' {{selectedItem}} </div>', 
     replace: true, 
     scope: { 
      listId: '=', 
      defaultItem: '=', 
      selectedItem: '=' 
     }, 
     controller: function($scope) { 
      $http({ 
       method: 'GET', 
       url: '/home/listvalues?listid=' + $scope.listId 
      }).then(function(response) { 
       $scope.lookupItems = response.data; 
      }, function(error) { 
       alert(error.data); 
      }); 
     }, 
     link: function(scope, element, attrs) {} 
    }; 
}); 

html görünümü: daha sonra ayarlanan özniteliği' dayalı bir mantıksal değere ng-gerekli hale getirmek için kontrol türünü içeren nitelikleri üzerinde yineleme edilir. Gerekli olan doğrudur. şeklinde üzerinde tekrarlanır nitelikler ($ scope.attributes) ait

<form name="profileAttributesForm" ng-controller="metadataCtrl" class="my-form"> 
    <div ng-repeat="a in attributes"> 
     <div ng-if="a.DataType == 1"> 
      <input type="text" name="attribute_{{$index}}" ng-model="a.Value" ng-required="a.Required" /> 
      <span ng-show="profileAttributesForm['attribute_{{$index}}'].$invalid">Enter a Text</span> text : {{a.Value}} 
     </div> 

     <div ng-if="a.DataType == 4"> 
      <div combo list-id="a.LookUpList" name="attribute_{{$index}}" selected-item="a.Value" ng-required="a.Required"></div> 
      <span ng-show="profileAttributesForm['attribute_{{$index}}'].$invalid">lookup Required</span> Value from lookup: {{a.Value}} 
     </div> 
    </div> 
</form> 

Numune, Ben sadece gösterim amaçlı olarak temin ediyorum:

[{ 
    "AttributeID": 1, 
    "DataType": 4, 
    "NodeID": 0, 
    "Name": "Name", 
    "Description": null, 
    "LookUpList": 1, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": "1", 
    "Order": 1, 
    "Value": "" 
}, { 
    "AttributeID": 3, 
    "DataType": 1, 
    "NodeID": 0, 
    "Name": "Job Title", 
    "Description": null, 
    "LookUpList": 0, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": null, 
    "Order": 2, 
    "Value": "" 
}, { 
    "AttributeID": 4, 
    "DataType": 1, 
    "NodeID": 0, 
    "Name": "Email", 
    "Description": null, 
    "LookUpList": 0, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": null, 
    "Order": 3, 
    "Value": "" 
}] 

Answer 1

amacıyla ngRequired için doğrulayıcı ayarlamak için ngModel, adresinden alınabilmesi için aynı öğenin üzerinde ayarlanmasını gerektirir, aksi takdirde ana özneyi etkilemeden yalnızca gerekli özniteliği açar veya kapatır.

Bir form durumu ($ el değmemiş, $ geçerli, vb), HTML tarafından değil, kayıtlı NgModelControllers tarafından belirlenmez. Bir ngModel, formun içine bağlandığında otomatik olarak bir denetleyici eklenir. o ngModel kendisine atanan olmadığı için

• Örneğin bu <input required type="text">, gerekli olsa bile, formun geçerliliğini etkilemez.
• Ancak bu <div ng-model="myDiv" required></div> gerekli olduğundan ve buna ngModel atanmış olduğundan bunu etkileyecektir.
  • basit bir:
  Senin durumunda

  , ben iki çözüm bkz hareket combo içine ngRequired ve ngModel aynı elementin üzerine ekleyin; Bunun için yeni bir kapsam değişkeni eklemeniz gerekir, ör.

• karmaşık biri isRequired: sizin yönergesine require: 'ngModel' ekleyin ve bu çalışması için de gerekli değişiklikleri yapın. Bu şekilde daha fazla kontrol ve esnekliğe sahip olursunuz. Örneğin, yolun sonunda ngModelOptions'u combo'a eklemek ister misiniz? Bu çözümü uygulamıyorsanız, manuel olarak eklemeniz gerekir.

  What's the meaning of require: 'ngModel'? kodunu okuyarak başlayabilirsiniz - farklı örnekleri içeren harika bir soru/cevap var. Daha ayrıntılı bir açıklama için, Using NgModelController with Custom Directives'a bir göz atın.Bir yan not olarak, Açısal 1.5'de require sözdizimini geliştirdiler - bkz. $onInit and new "require" Object syntax in Angular components.