无法以角度反应形式添加验证器

Posted

技术标签:

【中文标题】无法以角度反应形式添加验证器【英文标题】:Unable to add validators in angular reactive form 【发布时间】:2021-10-02 12:26:02 【问题描述】:

我正在制作一个反应角度形式,在提交值后将显示数组中的值。我试图将验证器添加到表单中,并且它们中的大多数都工作正常。只有当我达到密码时,它才会显示错误

错误 TS2339:“ReactiveComponent”类型上不存在属性“f”

我做错了什么? 我在这里先向您的帮助表示感谢 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();
  

【问题讨论】:

添加 getter 以便于访问表单字段 get f() return this.newForm.controls; 【参考方案1】:

由于您使用的是响应式表单而不是模板驱动表单,我认为您可以避免使用引用“f”,并使用您的 formGroup 来检测错误:

<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>

【讨论】:

最好将 toucheddirty 添加到组合中【参考方案2】:

我现在不知道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>

【讨论】:

以上是关于无法以角度反应形式添加验证器的主要内容,如果未能解决你的问题,请参考以下文章

[密码并以角度8的反应形式确认密码验证

角度反应形式 - 验证变化和模糊两者

我想编写可以以任何角度形式使用的通用验证 - 正常反应已经完成并且工作正常

我想编写可用于任何角度形式的通用验证-法向反应已经完成并且可以正常工作

在角度反应形式验证器中使用 google-libphonenumber

markdown 使用Bootstrap样式验证角度反应形式