Các trường trống không được đưa vào gửi biểu mẫu khi sử dụng Angular Formly

Question

Sử dụng Angular Formly Tôi đã thiết lập bộ điều khiển và mẫu sau. Tôi nhận được bộ điều khiển để in các giá trị mà người dùng đã nhập vào tất cả các trường, ngoại trừ những giá trị mà người dùng không chạm vào. Điều này có nghĩa là nếu người dùng không viết gì cả trong một trường, thì trường đó không được bao gồm. Mặc dù nếu người dùng nhập vào một cái gì đó và sau đó xóa nó, trường được bao gồm với một chuỗi rỗng.

Làm cách nào để bao gồm các trường mà người dùng chưa chạm vào?

// fooController.js 

vm.fooModel= {}; 
vm.fooFields = [ 
    { 
     key: 'foo', 
     type: 'input' 
     templateOptions: { 
      label: 'Foo', 
      placeholder: 'Foo' 
     } 
    } 
]; 

vm.onSubmit = function() { 
    console.log(vm.fooModel) 
} 

---

// fooTemplate.html 

<form ng-submit="vm.onSubmit()" novalidate> 
    <formly-form model="vm.fooModel" fields="vm.fooFields"></formly-form> 
    <button type="submit" class="btn btn-info submit-button">Submit</button> 
</form> 

Tôi không muốn thiết lập các chuỗi rỗng như một giá trị mặc định cho mọi lĩnh vực duy nhất.

---

Một ví dụ đơn giản có thể được tìm thấy here

Answer 1

Mỗi trường js góc đã sau trạng thái

$untouched The field has not been touched yet 
$touched The field has been touched 
$pristine The field has not been modified yet 
$dirty The field has been modified 
$invalid The field content is not valid 
$valid The field content is valid 

Bạn có thể tham gia một sự giúp đỡ của $pristine mà chỉ ra rằng lĩnh vực đầu vào được không được sửa đổi từ giá trị ban đầu.

Bạn thậm chí có thể lặp qua các đối tượng myForm (đối tượng không đầu vào trường đã khóa bắt đầu bằng một $) và sau đó thêm vào fooFields bạn phản đối

angular.forEach($scope.myForm, function(value, key) { 
    if(key[0] == '$') return; 
     console.log(key, value.$pristine) 
     if(value.$pristine){ 
     // add your field in fooFields object 
     } 
}); 

Answer 2

Như Vaibhav đề cập rằng bạn cũng có thể thử .

Tôi đã cố gắng tạo một hàm, vì vậy nếu bạn không muốn viết defaultValue cho mỗi trường.

Bạn có thể thử thêm các chức năng này để nó sẽ lặp lại trên tất cả các trường và sau đó đặt defaultValue.

Lưu ý: Tôi chưa sử dụng hoàn toàn góc cạnh. Vì vậy, tôi có thể không nhận thức được tất cả các chức năng.

function setDefaultValue(fields){ 
    for(var i=0;i<fields.length;i++){ 
    if(fields[i].fieldGroup){ 
     for(var j=0;j<fields[i].fieldGroup.length;j++){ 
     fields[i].fieldGroup[j] = setBlankValue(fields[i].fieldGroup[j]); 
     } 
    }else{ 
     fields[i] = setBlankValue(fields[i]); 
    } 
    } 
} 

function setBlankValue(field){ 
    if(!angular.isDefined(field.defaultValue)){ 
    field.defaultValue = ''; 
    } 
    return field; 
} 

Đây là liên kết được cập nhật.

http://jsbin.com/midatefiki/1

Nếu bạn chỉ muốn biết trường nào bị ảnh hưởng sau đó bạn có thể có một cái nhìn tại Vaibhav câu trả lời.

Answer 3

Bạn có thể loại bỏ các giá trị trống trong chức năng trình của bạn bằng tay để làm các trick:

vm.onSubmit = function() { 

    angular.forEach(vm.fooModel, function(value, key) { 
    if(value == ''){ // == is intentional 

     // pick one from 
     delete vm.fooModel[ key ] 
     // or 
     vm.fooModel[ key ] = null 
    } 
    }); 
    console.log(vm.fooModel) 
}