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>
相关推荐
IT_陈寒35 分钟前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
凉、介43 分钟前
ARM 总线技术 —— AMBA 入门
arm开发·笔记·学习
袁煦丞1 小时前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧1 小时前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
日更嵌入式的打工仔1 小时前
嵌入式入门:APP+BSP+HAL 三层分级架构浅析
笔记·单片机·嵌入式硬件·学习
晴殇i1 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____1 小时前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �1 小时前
前端转Java,从0到1学习教程
java·前端·学习
OliverH-yishuihan1 小时前
FPGA 入门 3 个月学习计划表
学习·fpga开发
小奋斗1 小时前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试