角2形式-当ngModel =空obj时禁用提交
角2形式-当ngModel =空obj时禁用提交
提问于 2016-12-12 19:34:11
我有一个用for循环动态创建的Angular2表单。对于这个问题，我关心的是我形式上的单选按钮。表单是在HTML中创建的，然后从TS中将每个输入的ngModel分配给一个空对象。我希望禁用表单中的submit按钮，直到选择单选按钮为止：
<form (ngSubmit)="onNext(f)" #f="ngForm">
<div class="multi-choice-question-div radio-btn-div question_div"
*ngIf="question?.type === 'multi-choice' && !question?.isYesOrNo">
<div *ngFor="let answer of question?.answerDetails">
<input
type="radio"
class="display-none"
id="{{ answer?.answerId }}"
[(ngModel)]="ngModelObj['question_' + question.questionId]"
name="answerForQustion{{ question?.questionId }}"
[value]="answer"
required>
<label class="col-md-12 col-sm-12 multi-choice-label" for="{{ answer?.answerId }}">
<p class="q-text">{{ answer?.value }}</p>
</label>
</div>
</div>
<button class="btn btn-next"
type="submit"
*ngIf="currentSectionIndex < sectionsArr.length - 1"
[disabled]="!f.valid">
NEXT
</button>
</form>即使客户端没有选择单选按钮，表单也认为它是有效的，我认为这是因为对于无线电输入的ngModel设置为= {}。
如何保持相同的设置(因为它深深地刻在组件的前端和后端)，但当ngModel = {}时使表单无效
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-12 19:56:30
有两种方法，调用一个函数来检查该值是否为空(可能代价高昂，可能过于复杂)：
[disabled]="f.invalid || isEmpty(f.value)"
isEmpty(formValue) {
let x = JSON.parse(JSON.stringify(formValue));
return Object.getOwnPropertyNames(x).length === 0;
}字符串化和解析一起删除了所有未定义的键(继续，console.log(formValue)并查看那些未定义的键！)
或者，您可以检查dirty的表单，该表单指示：
脏:如果用户更改了UI中的值，则布尔控件是脏的。 注意，对控件值的编程更改不会将其标记为脏。
[disabled]="!f.valid || !f.dirty"https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html#!#dirty-anchor
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41108205
复制相关文章
相似问题
腾讯云开发者
