Leere Felder, die nicht im Formular enthalten sind, senden bei Verwendung von Angular Formly

Question

Verwendung Angular Formly Ich habe den folgenden Controller und die Vorlage eingerichtet. Ich lasse den Controller die Werte, die der Benutzer eingegeben hat, in alle Felder drucken, mit Ausnahme derer, die der Benutzer nicht berührt hat. Das heißt, wenn der Benutzer überhaupt nichts in ein Feld schreibt, ist dieses Feld nicht enthalten. Wenn der Benutzer jedoch etwas eingibt und dann löscht, wird das Feld mit einer leeren Zeichenfolge eingeschlossen.

Wie schließe ich die Felder ein, die der Benutzer nicht berührt hat?

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

Ich würde nicht die leere Zeichenfolge als Standardwert für jedes einzelne Feld setzen bevorzugen.

---

kann ein einfaches Beispiel here

Answer 1

Jeder Winkel js Feld

$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 

Sie nehmen eine Hilfe von $pristine, die anzeigt, dass Eingabefeld nicht geändert hat folgenden Zustand gefunden werden vom ursprünglichen Wert.

Sie können sogar die myForm Objekt iterieren (Nicht-Eingabefeld Objekte haben Schlüssel mit einem $ Präfix) und fügen Sie dann in Ihre fooFields Objekt

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

Wie Vaibhav erwähnt, dass auch können Sie versuchen, .

Ich habe versucht, eine Funktion zu erstellen, also wenn Sie nicht defaultValue für jede Felder schreiben möchten.

Sie können versuchen, diese Funktionen hinzuzufügen, so dass es über alle Felder iterieren und dann defaultValue setzen wird.

Hinweis: Ich habe Angular-Formly nicht vollständig verwendet. Ich könnte also nicht auf alle Funktionen achten.

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

Hier ist der Link aktualisiert.

http://jsbin.com/midatefiki/1

Wenn Sie nur wissen möchten, welche Felder unangetastet sind, dann können Sie einen Blick auf Vaibhav Antwort nehmen.

Answer 3

Sie könnten die leeren Werte in Ihrer einreichen Funktion manuell entfernen, den Trick zu tun:

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