如果在表单标签中使用 ngModel，则必须设置 name 属性，或者必须在 ngModelOptions 中将表单控件定义为“独立”

Question

我使用 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>

Answer 1

如果你像这样使用[(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>

更多信息在这里：https://angular.io/api/forms/NgModel