关于Angular中的登录和注册问题？

huangapple
go评论110阅读模式
英文:

Issue with login and registration in angular?

问题

  2. Angular CLI: 9.0.0-rc.7
  4. Angular: 9.0.0-rc.7
  6. I'm working with login but get an error:
  8. browser console error:
  10. formGroup expects a FormGroup instance. Please pass one in.
  12.     <div [formGroup]="myGroup">
  13.       <input formControlName="firstName">
  14.     </div>
  16.     In your class:
  18.     this.myGroup = new FormGroup({
  19.        firstName: new FormControl()
  20.     });
  22. login.component.html
  1.          <div class="form-group">
  2.                <input type="password" formControlName="password" class="form-control" placeholder="Password" autocomplete="current-password" required>
  3.          </div>
  4.         
  5.          <button type="submit" class="btn btn-primary px-4">Login</button>
  6.   </form>
  2. login.component.ts

import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormsModule, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";

export class LoginComponent {

  1. logincreteform : FormGroup;
  3. constructor(private router: Router) {
  4. }
  6. ngOnInit() {
  7.     this.logincreteform = new FormGroup({
  8.         username: new FormControl(),
  9.         password: new FormControl()
  10.     });
  11. }

onSubmit() {
console.log(this.logincreteform);
let username;
let password ;
if (username == 'abc' && password == '123') {
this.router.navigate(['/register']);
}
else {
console.log("error");
}
}
}

  2. app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LoginComponent } from './views/login/login.component';
import { RegisterComponent } from './views/register/register.component';

@NgModule({
imports: [

ReactiveFormsModule,

declarations: [
LoginComponent,
RegisterComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }

  2. and when I uncomment register page code:
  4. then also give an error:

compiler.js:2531 Uncaught Error: Template parse errors:
No provider for ControlContainer (

[ERROR ->]

Register

Create your account<"): ng:///AppModule/RegisterComponent.html@7:14

  2. register.component.html
  1.       <div class="card-body p-4">
  2.           <form>
  3.             <h1>Register</h1>
  4.             <p class="text-muted">Create your account</p>
  5.             <div class="form-group">
  6.                     <input type="text" formControlName="username" class="form-control" placeholder="Username" autocomplete="username" required>
  7.             </div>
  8.            <div class="form-group">
  9.                      <input type="text" formControlName="email" class="form-control" placeholder="Email" autocomplete="email" required>
  10.            </div>
  11.            <div class="form-group">
  12.                  <input type="password" formControlName="password" class="form-control" placeholder="Password" autocomplete="new-password" required>
  13.            </div>
  14.                <button type="button" class="btn btn-block btn-success">Create Account</button>
  15.      </div>
  2. register.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-dashboard',
templateUrl: 'register.component.html'
})
export class RegisterComponent {

constructor() { }

}

  2. I want the simple login to enter username(abc) and password(123) then redirecting to the registration page?? what I'm doing wrong? help.
英文:

angular version:

Angular CLI: 9.0.0-rc.7

Angular: 9.0.0-rc.7

I'm working with login but get an error:

browser console error:

formGroup expects a FormGroup instance. Please pass one in.

  1. &lt;div [formGroup]=&quot;myGroup&quot;&gt;
  2.   &lt;input formControlName=&quot;firstName&quot;&gt;
  3. &lt;/div&gt;
  5. In your class:
  7. this.myGroup = new FormGroup({
  8.    firstName: new FormControl()
  9. });

login.component.html

  1.  &lt;div class=&quot;card-body&quot;&gt;
  2.         &lt;form [formGroup]=&quot;logincreteform&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
  3.               &lt;div class=&quot;form-group&quot;&gt;
  4.                  &lt;input type=&quot;text&quot; formControlName=&quot;username&quot; class=&quot;form-control&quot; placeholder=&quot;Username&quot; autocomplete=&quot;username&quot; required&gt;
  5.               &lt;/div&gt;
  7.              &lt;div class=&quot;form-group&quot;&gt;
  8.                    &lt;input type=&quot;password&quot; formControlName=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Password&quot; autocomplete=&quot;current-password&quot; required&gt;
  9.              &lt;/div&gt;
  10.             
  11.              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary px-4&quot;&gt;Login&lt;/button&gt;
  12.       &lt;/form&gt;
  13. &lt;/div&gt;

login.component.ts

  1. import { Component, OnInit,OnChanges, Input } from &#39;@angular/core&#39;;
  2. import { Router } from &#39;@angular/router&#39;;
  3. import { FormGroup, FormsModule, FormControl, ReactiveFormsModule, Validators} from &quot;@angular/forms&quot;;
  5. export class LoginComponent   {
  7.     logincreteform : FormGroup;
  9.     constructor(private router: Router) {
  10.     }
  12.     ngoninit() {
  13.         this.logincreteform = new FormGroup({
  14.             username: new FormControl(),
  15.             password: new FormControl()
  16.         });
  17.     }
  18.  
  19.    onSubmit() {
  20.         console.log(this.logincreteform);
  21.         let username;
  22.         let password ;
  23.         if (username == &#39;abc&#39; &amp;&amp; password == &#39;123&#39;) {
  24.             this.router.navigate([&#39;/register&#39;]);
  25.         }
  26.         else {
  27.             console.log(&quot;error&quot;);
  28.         }
  29.     }
  30. }

app.module.ts

  1. import { FormsModule,ReactiveFormsModule } from &#39;@angular/forms&#39;; 
  2. import { LoginComponent } from &#39;./views/login/login.component&#39;;
  3. import { RegisterComponent } from &#39;./views/register/register.component&#39;;
  5. @NgModule({
  6.   imports: [
  7.  
  8.    ReactiveFormsModule,
  10.   declarations: [
  11.       LoginComponent,
  12.       RegisterComponent
  13.   ],
  14. bootstrap: [ AppComponent ]
  15. })
  16. export class AppModule { }

and when I uncomment register page code:

then also give an error:

  1. compiler.js:2531 Uncaught Error: Template parse errors:
  2. No provider for ControlContainer (&quot;
  3.           &lt;div class=&quot;card mx-4&quot;&gt;
  4.             &lt;div class=&quot;card-body p-4&quot;&gt;
  5.               [ERROR -&gt;]&lt;form&gt;
  6.                 &lt;h1&gt;Register&lt;/h1&gt;
  7.                 &lt;p class=&quot;text-muted&quot;&gt;Create your account&lt;&quot;): ng:///AppModule/RegisterComponent.html@7:14

register.component.html

  1.           &lt;div class=&quot;card-body p-4&quot;&gt;
  2.               &lt;form&gt;
  3.                 &lt;h1&gt;Register&lt;/h1&gt;
  4.                 &lt;p class=&quot;text-muted&quot;&gt;Create your account&lt;/p&gt;
  5.                 &lt;div class=&quot;form-group&quot;&gt;
  6.                         &lt;input type=&quot;text&quot; formControlName=&quot;username&quot; class=&quot;form-control&quot; placeholder=&quot;Username&quot; autocomplete=&quot;username&quot; required&gt;
  7.                 &lt;/div&gt;
  8.                &lt;div class=&quot;form-group&quot;&gt;
  9.                          &lt;input type=&quot;text&quot; formControlName=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Email&quot; autocomplete=&quot;email&quot; required&gt;
  10.                &lt;/div&gt;
  11.                &lt;div class=&quot;form-group&quot;&gt;
  12.                      &lt;input type=&quot;password&quot; formControlName=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Password&quot; autocomplete=&quot;new-password&quot; required&gt;
  13.                &lt;/div&gt;
  14.                    &lt;button type=&quot;button&quot; class=&quot;btn btn-block btn-success&quot;&gt;Create Account&lt;/button&gt;
  15.          &lt;/div&gt;

register.component.ts

  1. import { Component } from &#39;@angular/core&#39;;
  3. @Component({
  4.   selector: &#39;app-dashboard&#39;,
  5.   templateUrl: &#39;register.component.html&#39;
  6. })
  7. export class RegisterComponent {
  9.   constructor() { }
  11. }

I want the simple login to enter username(abc) and password(123) then redirecting to the registration page?? what I m doing wrong?help.

答案1

得分: 1

你在注册组件中缺少了formGroup。你需要在form标签中添加它，就像在登录组件中所做的一样。

register.component.html

  1. <div class="card-body p-4">
  2.   <form [formGroup]="registerform" (ngSubmit)="onSubmit()">
  3.     <h1>Register</h1>
  4.     <p class="text-muted">Create your account</p>
  5.     <div class="form-group">
  6.       <input type="text" formControlName="username" class="form-control" placeholder="Username" autocomplete="username" required>
  7.     </div>
  8.     <div class="form-group">
  9.       <input type="text" formControlName="email" class="form-control" placeholder="Email" autocomplete="email" required>
  10.     </div>
  11.     <div class="form-group">
  12.       <input type="password" formControlName="password" class="form-control" placeholder="Password" autocomplete="new-password" required>
  13.     </div>
  14.     <button type="button" class="btn btn-block btn-success">Create Account</button>
  15.   </form>
  16. </div>

你还需要在你的component.ts文件中导入FormGroup并添加它。

  1. import { Component } from '@angular/core';
  2. import { FormGroup, FormBuilder, Validators } from '@angular/forms'; // 请确保导入了正确的模块
  4. @Component({
  5.   selector: 'app-dashboard',
  6.   templateUrl: 'register.component.html'
  7. })
  8. export class RegisterComponent {
  9.   registerform: FormGroup;
  11.   constructor(private formBuilder: FormBuilder) {
  12.     this.registerform = this.formBuilder.group({
  13.       username: ['', Validators.required],
  14.       email: ['', Validators.required],
  15.       password: ['', Validators.required]
  16.     });
  17.   }
  19.   onSubmit() {
  20.     // 处理表单提交逻辑
  21.   }
  22. }
英文:

You are missing formGroup in the register component. You need to add it in form tag the same as you did it in login component.

register.component.html

  1. &lt;div class=&quot;card-body p-4&quot;&gt;
  2.  &lt;form [formGroup]=&quot;registerform&quot; (ngSubmit)=&quot;onSubmit()&gt;
  3.    &lt;h1&gt;Register&lt;/h1&gt;
  4.    &lt;p class=&quot;text-muted&quot;&gt;Create your account&lt;/p&gt;
  5.    &lt;div class=&quot;form-group&quot;&gt;
  6.       &lt;input type=&quot;text&quot; formControlName=&quot;username&quot; class=&quot;form-control&quot; placeholder=&quot;Username&quot; autocomplete=&quot;username&quot; required&gt;
  7.                 &lt;/div&gt;
  8.                &lt;div class=&quot;form-group&quot;&gt;
  9.                          &lt;input type=&quot;text&quot; formControlName=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Email&quot; autocomplete=&quot;email&quot; required&gt;
  10.                &lt;/div&gt;
  11.                &lt;div class=&quot;form-group&quot;&gt;
  12.                      &lt;input type=&quot;password&quot; formControlName=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Password&quot; autocomplete=&quot;new-password&quot; required&gt;
  13.                &lt;/div&gt;
  14.                    &lt;button type=&quot;button&quot; class=&quot;btn btn-block btn-success&quot;&gt;Create Account&lt;/button&gt;
  15.          &lt;/div&gt;

you need add formGroup in you component.ts file as well.

  1. `import { Component } from &#39;@angular/core&#39;;
  2. import { FormsModule,ReactiveFormsModule } from &#39;@angular/forms&#39;; 
  3. @Component({
  4.   selector: &#39;app-dashboard&#39;,
  5.   templateUrl: &#39;register.component.html&#39;
  6. })
  7. export class RegisterComponent {
  8. registerform : FormGroup;
  9.   constructor() { }
  11. }`

答案2

得分: 0

现在我的问题已解决。

  1. login.component.cs
  3. import { Component, OnInit } from '@angular/core';
  4. import { Router } from '@angular/router';
  5. import { FormGroup, FormControl, Validators, FormBuilder } from "@angular/forms";
  7. @Component({
  8.     selector: 'app-dashboard',
  9.     templateUrl: 'login.component.html'
  10. })
  12. export class LoginComponent  {
  14.     login: FormGroup;
  16.     constructor(private frmbuilder: FormBuilder, public router: Router) {
  18.         this.login = this.frmbuilder.group({
  19.             username: [''],
  20.             password: ['']
  21.         });
  22.     }
  24.     onSubmit() {
  25.         console.log(this.login);
  26.         let username = this.login.get('username').value;
  27.         let password = this.login.get('password').value;
  28.         if (username == 'abc' && password == '123') {
  29.             this.router.navigate(['/dashboard']); // 当您的条件匹配时导航到仪表板页面，否则提供错误。(导航)
  30.         }
  31.         else {
  32.             console.log("error");
  33.         }
  34.     }
  36. Do Not Forget this line in Html page
  38. <form [formGroup]="login" (ngSubmit)="onSubmit()">
  1. <!-- 不要忘记在HTML页面中包含以下行 -->
  2. <form [formGroup]="login" (ngSubmit)="onSubmit()">
英文:

now my issue is Solved.

  1. login.component.cs
  3. import { Component, OnInit } from &#39;@angular/core&#39;;
  4. import { Router } from &#39;@angular/router&#39;;
  5. import { FormGroup, FormControl, Validators, FormBuilder} from &quot;@angular/forms&quot;;
  7. @Component({
  8.     selector: &#39;app-dashboard&#39;,
  9.     templateUrl: &#39;login.component.html&#39;
  10. })
  12. export class LoginComponent  {
  14.     login: FormGroup;
  16.     constructor(private frmbuilder: FormBuilder, public router:Router) {
  18.         this.login = this.frmbuilder.group({
  19.             username: [&#39;&#39;],
  20.             password: [&#39;&#39;]
  22.         });
  23.     }
  25.  onSubmit() {
  26.         console.log(this.login);
  27.         let username = this.login.get(&#39;username&#39;).value;
  28.         let password = this.login.get(&#39;password&#39;).value;
  29.         if (username == &#39;abc&#39; &amp;&amp; password == &#39;123&#39;) {
  30.             this.router.navigate([&#39;/dashboard&#39;]);     //navigate when your criteria match then redirect dashboard page otherwise give an error.(Navigation)
  31.         }
  32.         else {
  33.             console.log(&quot;error&quot;);
  34.         }
  35.     }
  37. Do Not Forget this line in Html page
  39.  &lt;form [formGroup]=&quot;login&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;

huangapple
  • 本文由 发表于 2020年1月3日 15:00:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/59574431.html
  • angular
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定