首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >错误TS2339:类型'ReactiveComponent‘上不存在属性'f’

错误TS2339:类型'ReactiveComponent‘上不存在属性'f’
EN

Stack Overflow用户
提问于 2021-07-12 09:20:57
回答 1查看 620关注 0票数 0

我对角质很陌生。我正在做一个反应角形式,在提交值之后,这个值将显示在数组中的值。我试图在表单中添加验证器,其中大多数都运行良好。只有当我到达密码时,它才会显示错误。

error TS2339:在'ReactiveComponent‘类型上不存在属性'f’

我做错什么了?感谢预先提供HTML组件的帮助:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
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();
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-12 09:29:12

  1. 基于名为male-avatar.jpgfemale-avatar.jpg之类的性别的图像,并将它们放在服务器中静态dir.
  2. 中,当用户根据性别类型注册时,将这些图像名指定为user.avatar的字符串,在前端(reactjs),您可以使用从服务器接收到的数据,如

g 210

代码语言:javascript
复制
  <img src={`/${data.user.avatar}`} />
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68344850

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档