英文:
Angular Reactive form werid behavior
问题
以下是您提供的代码的翻译部分:
login.component.html
<div class="main">
<div class="image">
<img src="./assets/icons/login.png" alt="Login">
<p>Login in to your account</p>
</div>
<form [formGroup]="form" class="login" (ngSubmit)="onClick()">
<p class="error-message" style="font-size: large;" *ngIf="!isValid">请填写您的信息</p>
<p>输入您的用户名和密码</p>
<div class="userName">
<label for="userName">用户名</label>
<br>
<input [ngClass]="{'error': emailValidation && !isValid}" type="text" id="userName" placeholder="您的用户名" formControlName="email">
<p class="error-message" *ngIf="emailValidation && !isValid">请输入您的用户名</p>
</div>
<div class="pass">
<label for="pass">密码</label>
<br>
<input [ngClass]="{'error': passwordValidation || !isValid}" type="password" id="pass" placeholder="您的密码" formControlName="password">
<p class="error-message" *ngIf="passwordValidation || !isValid">请输入您的用户密码</p>
</div>
<button class="btnConfig" id="btnlogin"><img src="./assets/icons/login-btn.png" alt="登录"> 登录</button>
</form>
</div>
login.component.ts:
import { AfterContentChecked, Component, DoCheck, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, DoCheck {
form!: FormGroup;
isValid: boolean = true;
constructor (private formBuilder: FormBuilder, private router: Router) {}
ngOnInit(): void {
this.form = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required]
});
this.form.valueChanges.subscribe()
}
ngDoCheck(): void {
this.form.valueChanges.subscribe(() => {
this.isValid = this.form.valid;
});
}
get emailValidation() {
return this.form.get('email')?.invalid || this.form.get('email')?.touched;
}
get passwordValidation() {
return this.form.get('password')?.invalid && this.form.get('password')?.touched;
}
onClick() {
if(this.form.valid) {
this.router.navigate(['/dashboard']);
} else {
this.isValid = this.form.valid;
}
}
}
请注意,我已对其中的HTML和TypeScript代码进行了翻译,但没有包括代码中的注释和描述。如果您需要更多帮助或有其他问题,请随时提出。
英文:
i have this code i'm working on:
login.component.html
<div class="main">
<div class="image">
<img src="./assets/icons/login.png" alt="Login">
<p>Login in to your account</p>
</div>
<form [formGroup]="form" class="login" (ngSubmit)="onClick()">
<p class="error-message" style="font-size: large;" *ngIf="!isValid">Please fill the your info</p>
<p>Enter your user name and password</p>
<div class="userName">
<label for="userName">User name</label>
<br>
<input [ngClass]="{'error': emailValidation && !isValid}" type="text" id="userName" placeholder="Your user name" formControlName="email">
<p class="error-message" *ngIf="emailValidation && !isValid">please enter your user name</p>
</div>
<div class="pass">
<label for="pass">Password</label>
<br>
<input [ngClass]="{'error': passwordValidation || !isValid}" type="password" id="pass" placeholder="your password" formControlName="password">
<p class="error-message" *ngIf="passwordValidation || !isValid">please enter your user password</p>
</div>
<button class="btnConfig" id="btnlogin"><img src="./assets/icons/login-btn.png" alt="login"> Login</button>
</form>
</div>
login.component.ts:
import { AfterContentChecked, Component, DoCheck, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, DoCheck {
form!: FormGroup;
isValid: boolean = true;
constructor (private formBuilder: FormBuilder, private router: Router) {}
ngOnInit(): void {
this.form = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required]
});
this.form.valueChanges.subscribe()
}
ngDoCheck(): void {
this.form.valueChanges.subscribe(() => {
this.isValid = this.form.valid;
});
}
get emailValidation() {
return this.form.get('email')?.invalid || this.form.get('email')?.touched;
}
get passwordValidation() {
return this.form.get('password')?.invalid && this.form.get('password')?.touched;
}
onClick() {
if(this.form.valid) {
this.router.navigate(['/dashboard']);
} else {
this.isValid = this.form.valid;
}
}
}
ever thing work fine with the validation until i press the login button with the two input fields empty the error message show and when i just fill one of the input the error messages disappear from both fields
i tried
ngDoCheck(): void {
this.form.valueChanges.subscribe(() => {
this.isValid = this.form.valid;
});
}
to keep checking but still the bug doesn't go
答案1
得分: 0
login.component.ts:
我通过移除 ngDoCheck,将订阅移到 ngOnInit 中,替换 isVaild 为 isSubmitted,编辑 passwordValidation 和 emailValidation,以及将 OnClick 编辑为 onSubmit 来解决了这个问题。
login.component.ts:
login.component.html:
login.component.html:
英文:
i fix the problem by remove the ngDoCheck, put the subscription in to ngOnInit,
replace the isVaild with isSubmitted, edit the passwordValidation and emailValidation, and edit the OnClick to be onSubmit
login.component.ts:
import { AfterContentChecked, Component, DoCheck, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
form!: FormGroup;
isSubmitted: boolean = false;
constructor (private formBuilder: FormBuilder, private router: Router) {}
ngOnInit(): void {
this.form = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required]
});
this.form.valueChanges.subscribe()
}
get emailValidation() {
return this.form.get('email')?.invalid && (this.form.get('email')?.dirty || this.form.get('email')?.touched || this.isSubmitted);
}
get passwordValidation() {
return this.form.get('password')?.invalid && (this.form.get('password')?.dirty || this.form.get('password')?.touched || this.isSubmitted);
}
onSubmit(): void {
if(this.form.valid){
this.router.navigate(['/dashboard'])
}
this.isSubmitted = true;
}
}
login.component.html:
<div class="main">
<div class="image">
<img src="./assets/icons/login.png" alt="Login">
<p>Login in to your account</p>
</div>
<form [formGroup]="form" class="login" (ngSubmit)="onSubmit()">
<p class="error-message" style="font-size: large;" *ngIf="isSubmitted">Please fill the your info</p>
<p>Enter your user name and password</p>
<div class="userName">
<label for="userName">User name</label>
<br>
<input [ngClass]="{'error': emailValidation}" type="text" id="userName" placeholder="Your user name" formControlName="email">
<p class="error-message" *ngIf="emailValidation">please enter your user name</p>
</div>
<div class="pass">
<label for="pass">Password</label>
<br>
<input [ngClass]="{'error': passwordValidation}" type="password" id="pass" placeholder="your password" formControlName="password">
<p class="error-message" *ngIf="passwordValidation">please enter your user password</p>
</div>
<button class="btnConfig" id="btnlogin" type="submit"><img src="./assets/icons/login-btn.png" alt="login"> Login</button>
</form>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论