當使用Angular Formly時，表單中未包含的空字段

使用Angular Formly我已經設置了以下控制器和模板。我讓控制器打印出用戶輸入到所有字段的值，但用戶未觸及的那些值除外。這意味着如果用戶在字段中根本不寫任何內容，則不包括該字段。雖然如果用戶輸入了一些內容並將其刪除，該字段將包含一個空字符串。當使用Angular Formly時，表單中未包含的空字段

如何包含用戶未觸及的字段？

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

我寧願不要設置爲空字符串爲每一個字段的默認值。

一個簡單的例子可以發現here

來源

2016-08-05 Oskar Persson

我不知道這個模塊，但我買到了，我做的是文檔的快速閱讀： **你必須使用defaultValue **。 – developer033

這是正常行爲;如果你需要一個像「」（非空）的默認值，只需在提交函數的頂部添加一個foreach以獲得所有的空值賦值「」。 – MrPk

@MrPk你會怎麼寫這個foreach？你會通過什麼清單？ –

每個角的js字段具有以下狀態

$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

可以採取的$pristine幫助其指示輸入域未改性從原來的價值。

你甚至可以遍歷myForm的對象（非輸入字段對象有一個$前綴鍵），然後添加到您的fooFields對象

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

來源

2016-08-09 07:20:38

由於Vaibhav的提一句，你也可以試試。

我試着創建一個函數，所以如果你不想爲每個字段寫defaultValue。

您可以嘗試添加此函數，以便遍歷所有字段，然後設置defaultValue。

注意：我還沒有完全使用Angular-formly。所以我可能不知道所有的功能。

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

這是更新後的鏈接。

http://jsbin.com/midatefiki/1

如果你只想知道哪些字段不變，那麼你可以看看Vaibhav的答案。

來源

2016-08-09 07:34:10 Nitish

你可以在你提交功能，手動刪除空白值這樣的伎倆：

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

來源

2016-08-15 10:23:38 Motocarota

當使用Angular Formly時，表單中未包含的空字段

回答

相關問題