无法以 angular 反应形式添加验证器
Unable to add validators in angular reactive form
我正在制作一个反应式 angular 表单,它在提交值后将在数组中显示值。我试图将验证器添加到表单中,并且大多数都工作正常。只有当我输入密码时,它才显示错误
error TS2339: Property 'f' does not exist on type 'ReactiveComponent'
我做错了什么?
我在这里先向您的帮助表示感谢
HTML 组件:
<h1>Reactive Form</h1>
<div>
<form [formGroup]="newForm" (ngSubmit)="onSubmit()">
<p>
<label for="username">Username</label>
<input type="text" formControlName="username" required>
</p>
<div *ngIf="f.username.invalid && (f.username.dirty || f.username.touched)">
<div *ngIf="f.username.errors?.required">
Username is required
</div>
</div>
<p>
<label for="email">Email</label>
<input type="email" formControlName="email" required>
</p>
<div *ngIf="f.email.invalid && (f.email.dirty || f.email.touched)">
<div *ngIf="f.email.errors?.required">
Email not entered
</div>
<div *ngIf="f.email.errors?.email">
Please enter valid email
</div>
</div>
<p>
<label for="password">Password</label>
<input type="password" formControlName="password" required>
</p>
<div *ngIf="f.password.invalid && (f.password.dirty || f.password.touched)">
<div *ngIf="f.password.errors?.required">
Password is required
</div>
<div *ngIf="f.password.errors?.minlength">
Password must be 6 characters
</div>
</div>
<button type="submit">Submit</button>
</form>
<!-- <button (click)="removeItem()">Remove item</button> -->
<button (click)="removeAll()">Remove all item</button>
</div>
<!-- <button (click)="updateUsername()">Update User</button> -->
<h1>
{{ newForm.value }}
</h1>
reactive.components.ts:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-reactive',
templateUrl: './reactive.component.html',
styleUrls: ['./reactive.component.css']
})
export class ReactiveComponent implements OnInit {
newid!: any;
newForm = new FormGroup({
username : new FormControl('',[Validators.required]),
email : new FormControl('', [Validators.required]),
password : new FormControl('',[Validators.required, Validators.minLength(6)])
});
//username = new FormControl('');
constructor() { }
ngOnInit() : void{
// this.display();
}
// display(){
// this.newid = localStorage.getItem('formdata');
// }
// updateUsername(){
// this.username.setValue('newusername')
// }
onSubmit(){
var dataObject= this.newForm.value ;
var array = JSON.parse(localStorage.getItem("formdata") || '[]')
array.push(dataObject);
localStorage.setItem("formdata",JSON.stringify(array));
}
// removeItem() {
// localStorage.removeItem('formdata');
// }
removeAll() {
localStorage.clear();
}
}
由于您使用的是响应式表单而不是模板驱动表单,我认为您可以避免使用引用“f”,并使用您的表单组来检测错误:
<div *ngIf="newForm.getError('required', 'username')"">
Username is required
</div>
<div *ngIf="newForm.getError('required', 'email')"">
email is required
</div>
<div *ngIf="newForm.getError('required', 'password')"">
password is required
</div>
<div *ngIf="newForm.getError('required', 'minLength')""> <!-- Don't know if it works -->
Username min length is 6
</div>
我现在不知道 f
是什么,试试这个结构:
<div *ngIf="newForm.get('password')?.invalid && (newForm.get('password')?.dirty || newForm.get('password')?.touched)">
<div *ngIf="newForm.get('password')?.hasError('required')">
Password is required
</div>
<div *ngIf="newForm.get('password')?.hasError('minlength')">
Password must be 6 characters
</div>
</div>
我正在制作一个反应式 angular 表单,它在提交值后将在数组中显示值。我试图将验证器添加到表单中,并且大多数都工作正常。只有当我输入密码时,它才显示错误
error TS2339: Property 'f' does not exist on type 'ReactiveComponent'
我做错了什么? 我在这里先向您的帮助表示感谢 HTML 组件:
<h1>Reactive Form</h1>
<div>
<form [formGroup]="newForm" (ngSubmit)="onSubmit()">
<p>
<label for="username">Username</label>
<input type="text" formControlName="username" required>
</p>
<div *ngIf="f.username.invalid && (f.username.dirty || f.username.touched)">
<div *ngIf="f.username.errors?.required">
Username is required
</div>
</div>
<p>
<label for="email">Email</label>
<input type="email" formControlName="email" required>
</p>
<div *ngIf="f.email.invalid && (f.email.dirty || f.email.touched)">
<div *ngIf="f.email.errors?.required">
Email not entered
</div>
<div *ngIf="f.email.errors?.email">
Please enter valid email
</div>
</div>
<p>
<label for="password">Password</label>
<input type="password" formControlName="password" required>
</p>
<div *ngIf="f.password.invalid && (f.password.dirty || f.password.touched)">
<div *ngIf="f.password.errors?.required">
Password is required
</div>
<div *ngIf="f.password.errors?.minlength">
Password must be 6 characters
</div>
</div>
<button type="submit">Submit</button>
</form>
<!-- <button (click)="removeItem()">Remove item</button> -->
<button (click)="removeAll()">Remove all item</button>
</div>
<!-- <button (click)="updateUsername()">Update User</button> -->
<h1>
{{ newForm.value }}
</h1>
reactive.components.ts:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-reactive',
templateUrl: './reactive.component.html',
styleUrls: ['./reactive.component.css']
})
export class ReactiveComponent implements OnInit {
newid!: any;
newForm = new FormGroup({
username : new FormControl('',[Validators.required]),
email : new FormControl('', [Validators.required]),
password : new FormControl('',[Validators.required, Validators.minLength(6)])
});
//username = new FormControl('');
constructor() { }
ngOnInit() : void{
// this.display();
}
// display(){
// this.newid = localStorage.getItem('formdata');
// }
// updateUsername(){
// this.username.setValue('newusername')
// }
onSubmit(){
var dataObject= this.newForm.value ;
var array = JSON.parse(localStorage.getItem("formdata") || '[]')
array.push(dataObject);
localStorage.setItem("formdata",JSON.stringify(array));
}
// removeItem() {
// localStorage.removeItem('formdata');
// }
removeAll() {
localStorage.clear();
}
}
由于您使用的是响应式表单而不是模板驱动表单,我认为您可以避免使用引用“f”,并使用您的表单组来检测错误:
<div *ngIf="newForm.getError('required', 'username')"">
Username is required
</div>
<div *ngIf="newForm.getError('required', 'email')"">
email is required
</div>
<div *ngIf="newForm.getError('required', 'password')"">
password is required
</div>
<div *ngIf="newForm.getError('required', 'minLength')""> <!-- Don't know if it works -->
Username min length is 6
</div>
我现在不知道 f
是什么,试试这个结构:
<div *ngIf="newForm.get('password')?.invalid && (newForm.get('password')?.dirty || newForm.get('password')?.touched)">
<div *ngIf="newForm.get('password')?.hasError('required')">
Password is required
</div>
<div *ngIf="newForm.get('password')?.hasError('minlength')">
Password must be 6 characters
</div>
</div>