Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了【Angular】--- If ngModel is used within a form tag, either the name attribute must be set or the form大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

【前言】:

在最近的项目中,对angular的学习也才算是开始入门。对于angular小白的我来说,每次遇到问题都是很好的成长机会,哪怕很小,(#^.^#)。不断的在错误中成长吧。

错误】:

ERROR Error: If ngModel is used within a form tag,either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: truE}">

【分析】:

要能有很好的耐心看错误提示很重要,每一个错误解决方案也往往就在错误提示中隐藏甚至是“暴露”着。O(∩_∩)O哈哈~

上面的异常信息告诉我们如果再表单标签使用NgModel,则必须设置name属性,或者在NgModelOptions中必须将表单控件定义为“standalone”。
因为ngForm持有通过ngModel指令和name属性为各个元素创建的那些控件,并且监视他们的属性变化,包括有效性。它还有自己的valid属性,只当其中的所有控件都有效时,它才有效。

【理论】:

angular2的表单主要用到了ngForm,ngModel,ngSubmit。ngSubmit对应的函数是我们提交表单调用函数。angular2通过ngForm将按钮的禁用/启用状态和表单的有效性关联起。
#loginForm、#username和#userpwd都是angular2中的模板引用变量;
#username和#userpwd可以监控input输入框的状态,#loginForm可以用来监控表单的状态,通过这些状态可以进行输入错误提示以及表单提交控制。
HTML控件(比如input、SELEct等)的状态主要包括
prisTine和dirty:控件是否使用过,或者理解成是否输入过内容
invalid和valid:控件输入是否有效
touched和untouched:控件是否已经被访问过。

【实战】:

<div class="modal-body">
<form role="form" class="form-horizontal" #validationForm1="ngForm">
<div class="form-group">
<div class="col-sm-6 form-inline">
<label class="control-label">姓名:</label>
<label>
<input type="text" id="familymemname" class="form-control" [(ngModel)]="homeInfo.familymemname" name="familymemname" ngModel
#familymemname="ngModel" required>
</label>
</div>
<div class="col-sm-6 form-inline">
<label class="control-label">关系:</label>
<label>
<SELEct class="form-control sel-width" [(ngModel)]="homeInfo.relationshipId" name="relationshipId" required>
<option *ngFor="let option of relationOptions" [value]="option.id">{{option.DictNamE}}</option>
</SELEct>
</label> 
</div>
</div>
    ……
</div>
</form>
</div>

<div class="modal-footer">
<!-- [disabled]="!addform.form.valid" -->
<button type="button" class="btn btn-priMary" [disabled]="!validationForm1.form.valid" (click)="add(addModal)">
添加
</button>
<button type="button" class="btn btn-default" (click)="close(addModal)">
取消
</button>
</div>

【总结】:

validationForm1.form.valid用来判断form表单中的控件是否全部有效。在Ng2表单中使用NgModel必须带name属性或者使用[ngModelOptions]=”{standalone: truE}”。否则会报上面的错误

大佬总结

以上是大佬教程为你收集整理的【Angular】--- If ngModel is used within a form tag, either the name attribute must be set or the form全部内容,希望文章能够帮你解决【Angular】--- If ngModel is used within a form tag, either the name attribute must be set or the form所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。