error TS2339: Property 'f' does not exist on type 'ReactiveComponent'

Question

I am new to angular. I was making a reactive angular form, which after submitting the value will show the values in an array. I was trying to add validators to the form and most of them were working fine. Only when I reached the password, it showing error

error TS2339: Property 'f' does not exist on type 'ReactiveComponent'

What did I do wrong? Thanks for the help in advance HTML component:

<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();
  }
}

Answer 1

1. Take images one based on genders named something like male-avatar.jpg, female-avatar.jpg and put them in your servers static dir.
2. when user signs up based on the gender type assign these image names as string to your user.avatar in db.
3. On frontend (reactjs) you can use the data received from the server like this

  <img src={`/${data.user.avatar}`} />