Angular学习第二天--问题记录

一、问题

1.用脚手架搭建完项目之后,缺少app.modules.ts文件,

2.解决办法:

在终端继续输入命令 ng new 项目名称 --no-standalone --routing --ssr=false

3.完整目录:

二、问题

1.问题来源,源代码:

javascript 复制代码
<form action="">

    账号:<input type="text" required #nameInp="ngModel" [(ngModel)]="formData.name">
    <!-- <p>验证结果:{{nameInp.valid}}</p> -->
    <p *ngIf="!nameInp.valid">请输入账号!!!</p>


  <label>
    密码:<input type="text" required #pwdInp="ngModel" [(ngModel)]="formData.password">
    <p>验证结果:{{pwdInp.valid}}</p>
  </label>
  <button (click)="subForm2(nameInp)">提交验证</button>
</form>

2.控制台报错

javascript 复制代码
main.ts:6 ERROR Error: NG01352: 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.

3.解决办法:

在绑定 ngModel的标签上绑定 name属性即可

4.完整代码,正确代码:

javascript 复制代码
<form action="">

    账号:<input type="text" required #nameInp="ngModel" [(ngModel)]="formData.name" name="username">
    <!-- <p>验证结果:{{nameInp.valid}}</p> -->
    <p *ngIf="!nameInp.valid">请输入账号!!!</p>


  <label>
    密码:<input type="text" required #pwdInp="ngModel" [(ngModel)]="formData.password" name="password">
    <p>验证结果:{{pwdInp.valid}}</p>
  </label>
  <button (click)="subForm2(nameInp)">提交验证</button>
</form>
相关推荐
sealaugh3230 分钟前
AI(学习笔记第十二课) 使用langsmith的agents
人工智能·笔记·学习
QZ_orz_freedom33 分钟前
学习笔记--事务管理
笔记·学习
@PHARAOH1 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了1 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER1 小时前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star1 小时前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端1 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏2 小时前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq2 小时前
前端box-shadow出现兼容性问题如何处理
前端
携欢2 小时前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss