2016-08-05 7 views
5

Używanie Angular Formly Mam skonfigurowany następujący kontroler i szablon. Dostaję kontroler, aby wydrukował wartości wprowadzone przez użytkownika we wszystkich polach oprócz tych, których użytkownik nie dotknął. Oznacza to, że jeśli użytkownik nie pisze nic w polu, to pole nie jest uwzględnione. Chociaż jeśli użytkownik wprowadzi coś, a następnie usunie go, pole zostanie dołączone do pustego ciągu znaków.Puste pola niewymienione w formularzu są przesyłane podczas używania Angular Formly

Jak uwzględnić pola, których użytkownik nie dotknął?

// 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> 

wolałbym, aby nie ustawić pusty ciąg znaków jako wartości domyślnej dla każdego pola.


Prosty przykład można znaleźć here

+0

nie wiem tego modułu, ale co mam do szybkiego odczytu na docs, że zrobiłem to: ** musisz użyć wartości defaultValue **. – developer033

+0

To normail zachowanie; jeśli potrzebujesz wartości domyślnej, takiej jak "" (to nie jest wartość null), po prostu dodaj foreach na górze funkcji submit, aby uzyskać przypisanie wszystkich reklam o wartości pustej "". – MrPk

+0

@MrPk Jak napisałeś to foreach? Jaką listę przemierzysz? –

Odpowiedz

0

Każdy kątowe pole js ma następującym stanie

$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 

Możesz wziąć pomocy $pristine co wskazuje, że pole wejściowe jest niemodyfikowane od pierwotnej wartości.

Można nawet iteracyjne nad obiekt MyForm (obiekty non-input-polowych klawisze poprzedzone znakiem $), a następnie dodać do swojej fooFields sprzeciw

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 
     } 
}); 
0

As wzmianki Vaibhav, które również można spróbować .

Próbowałem utworzyć jedną funkcję, więc jeśli nie chcesz pisać defaultValue dla każdego pola.

Możesz spróbować dodać te funkcje, aby uzyskać iterację we wszystkich polach, a następnie ustawić wartość defaultValue.

Uwaga: Nie wykorzystałem w pełni formacji kątowej. Mogę więc nie wiedzieć o całej funkcjonalności.

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; 
} 

Oto zaktualizowany link.

http://jsbin.com/midatefiki/1

Jeśli chcesz tylko wiedzieć, które pola są nietknięte wtedy można przyjrzeć Vaibhav odpowiedź.

0

Można usunąć puste wartości w funkcji złożyć ręcznie rade:

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) 
} 
Powiązane problemy