用原始数据发送Angular2表格

问题：我想提交一份带有原始数据的表单，但验证程序不允许我这样做，因为表单无效。用原始数据发送Angular2表格

我试图用驱动方式的数据发送形式，表单生成器，我想送是一个模式里面的数据。该模式的目的是使用户可以编辑一些数据，对模态的输入字段都充满了以前的数据，这就是为什么我并不需要检查，如果用户更改值，但是我仍然需要检查如果这些字段不是空的。

忽略选择器是在模态的底部。

[模态的屏幕截图] [1] [1]：https://i.stack.imgur.com/Q1GU4.png

窗体生成代码

this.editProblemForm = this._formBuilder.group({ 
    'problemDetails': this._formBuilder.group({ 
    'engDescription': ['', Validators.required], 
    'spnDescription': ['', Validators.required] 
    }) 
});

模态代码，其中值被检索，在所述摘录的底部是一个按钮，是当表单是无效的禁用，的问题是，当用户打开的所有信息已经被填满，使按键不应该被禁用的模式，但它是。

<!-- Descriptions --> 
 
<div class="row margin-top20"> 
 
    <div class="input-group margin-top20"> 
 
    <label for="desc_engEdit">Problem description: English</label> 
 
    <textarea id="desc_engEdit" rows="6" formControlName="engDescription" [value]="descriptionEng" 
 
       class="form-control white-space"></textarea> 
 
    </div> 
 
</div> 
 
<div class="row margin-top20 margin-bottom20"> 
 
    <div class="input-group margin-top20"> 
 
    <label for="desc_spnEdit">Problem description: Spanish</label> 
 
    <textarea id="desc_spnEdit" rows="6" formControlName="spnDescription" [value]="descriptionSpn" 
 
       class="form-control white-space"></textarea> 
 
    </div> 
 
</div> 
 

 
<button [disabled]="!editProblemForm.valid" type="submit" class="btn btn-primary">Save changes 
 
        </button>

解决方案使用@silentsod方法

updateFormValues(){ 

let formObject : any; 
    formObject = this.editProblemForm.controls['problemDetails']; 
    formObject.controls['engDescription'].setValue(this.descriptionEng); 
    formObject.controls['spnDescription'].setValue(this.descriptionSpn); 
}

谢谢！

来源

2016-11-26 Alfredo Hinojosa

你能告诉你如何设置这些值？ – silentsod

@silentsod我刚刚更新了问题，谢谢 –

的问题是，与活性形式（模型驱动的），你需要调用setValue正确更新控制值。否则，它会认为该表单是空的，并且您所需的验证器未被满足。

假设你已经在你被送入模态，什么控制再打开的时候，你的模态分量打字稿：

onOpen() { //or however you've named it/arguments you have 
    this.editProblemForm.controls['problemDetails'].controls['engDescription'].setValue(descriptionEng); //wherever you got that from 
    this.editProblemForm.controls['problemDetails'].controls['spnDescription'].setValue(descriptionSpn); //wherever you got that from 
}

顺便说一句，你也不应该使用[disabled]而是编程在控件上调用.disable()和.enable()。在控制台日志中会有一条警告消息。

来源

2016-11-26 22:28:39 silentsod

它的工作！我只需要首先将表单对象保存在变量中，因为TypeScript不允许我在一行中完成所有操作。谢谢！ –

用原始数据发送Angular2表格

回答

相关问题