html - 如果在表单标签中使用 ngModel,则必须设置 name 属性,或者必须在 ngModelOptions 中将表单控件定义为“独立”
问题描述
我使用 Angular 9。我的目标是当我点击登录按钮时,如果登录成功,它会将我重定向到仪表板,否则它会将我重定向到登录页面。当我输入我的用户名和密码并单击登录按钮时,它会显示错误如果在表单标记中使用 ngModel,则必须设置名称属性或必须在 ngModelOptions 中将表单控件定义为“独立”
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}">
at Function.push../node_modules/@angular/forms/fesm5/forms.js.TemplateDrivenErrors.missingNameException
(forms.js:4830)
at NgModel.push../node_modules/@angular/forms/fesm5/forms.js.NgModel._checkName
(forms.js:5158)
at NgModel.push../node_modules/@angular/forms/fesm5/forms.js.NgModel._checkForErrors
(forms.js:5143)
at NgModel.push../node_modules/@angular/forms/fesm5/forms.js.NgModel.ngOnChanges
(forms.js:5046)
at checkAndUpdateDirectiveInline (core.js:22777)
at checkAndUpdateNodeInline (core.js:31612)
at checkAndUpdateNode (core.js:31574) at debugCheckAndUpdateNode (core.js:32211)
at debugCheckDirectivesFn (core.js:32171)
at Object.eval [as updateDirectives] (LoginComponent.html:16) View_LoginComponent_0 @ LoginComponent.html:15 LoginComponent.html:16
ERROR CONTEXT DebugContext_
loginc.component.html
代码
<div class="app-body">
<main class="main d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<form>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username" [(ngModel)]="username" autocomplete="username" required>
</div>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password"[(ngModel)]="password" autocomplete="current-password" required>
</div>
<div class="row">
<div class="col-6">
<button type="button" (click)=dologin class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center">
<div>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
解决方案
如果你[(ngModel)]
像这样使用你将需要设置[ngModelOptions]="{standalone: true}"
<div class="app-body">
<main class="main d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<form>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username" [(ngModel)]="username" [ngModelOptions]="{standalone: true}" autocomplete="username" required>
</div>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password"[(ngModel)]="password" [ngModelOptions]="{standalone: true}" autocomplete="current-password" required>
</div>
<div class="row">
<div class="col-6">
<button type="button" (click)=dologin class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center">
<div>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
推荐阅读
- c++ - NetUserChangePassword() 可以给管理员设置密码吗?
- firebase - 使用 streambuilder 颤动 firebase:服务器费用会成倍增长吗?
- java - 如何组合所有类似的数组循环方法?Java 1.8
- python - 如何在 django 中返回原始查询结果
- python-3.x - Python如何根据范围从整数数组列表中创建子集?
- typeerror - 类型错误:“builtin_function_or_method”对象不支持项目分配。我该如何解决?
- vb.net - 64 bBit 应用程序中的 32 位 dll
- objective-c - 在 Swift 中模拟 NSCache 泛型方法
- c# - Opentk 中从屏幕坐标到世界坐标的转换
- node.js - 部署到 Heroku 时 Nodemailer 不工作