TypeError, forms validators

Question

Trying to construct a reactive Angular form but getting a type error. Here's the angular-html-

<form [formGroup]="newUser" (ngSubmit)='onSubmit()'>
    <label>ID</label>
    <br>
    <input type="text" placeholder="Please Enter Your ID" formControlName="Tz" required>
    <span *ngIf="Tz.errors?.minLength && Tz.touched">Your ID must be at least 4 digits long</span>
    <span *ngIf="Tz.errors?.maxLength && Tz.touched">Your ID must be at most 9 digits long</span>
    <span *ngIf=""></span>
    <br>
    <label>Email</label>
    <br>
    <input type="email" placeholder="Please Enter Your Email" formControlName="Email" required>
    <span *ngIf="Email.invalid &&Email.touched">Your email does not look right</span>
    <br>
    <label>Password</label>
    <br>
    <input type="text" placeholder="Please Choose A Password" formControlName="PW" size="25" required>
    <br>
    <label>Resubmit Your Password</label>
    <br>
    <input type="text" placeholder="Please Resubmit Your Password" formControlName="PWVerification" size="30" required>
    <br>
    <input type="submit" class="btn btn-success" [disabled]="newUser.invalid">
</form>

Here's the typescript:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators , FormsModule} from '@angular/forms';
import { RegisterService } from '../register.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  public newUser;
  public verification;
  constructor(public RS: RegisterService) { }

  ngOnInit() {
    this.newUser = new FormGroup({
      Tz: new FormControl ('',[Validators.required,Validators.minLength(4),Validators.maxLength(9)]),
      Email: new FormControl ('',[Validators.required,Validators.email]),
      PW: new FormControl ('', [Validators.required,Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$')]),
      PWVerification: new FormControl ('', Validators.required)
    })
  }

  onSubmit() {
    console.log(this.newUser.value);

    /*this.RS.RegisterUser(this.newUser.value).subscribe(

    )*/
  }
}

I am sure I am missing something but I simply can't put my finger on it.

Also, it the required attribute on the angular HTML necessary if I have set validators.required to all formcontrolnames on the TS side or is it redundant?

Thanks in advance

There was a type error which was rectified by calling the formgroup instead of the individual form control names. Trying to figure out why ` ` — Subjugation
– Subjugation, Commented Dec 5, 2019 at 19:07

MoxxiManagarm · Accepted Answer · 2019-12-05 18:52:32Z

2

<span *ngIf="Email.invalid &&Email.touched">Your email does not look right</span>

I believe your error is about this code. Email is not a field, it is only a form control name. You need to refer to the form instead and get the required form field.

<span *ngIf="newUser.get('Email').invalid && newUser.get('Email').touched">Your email does not look right</span>

answered Dec 5, 2019 at 18:52

MoxxiManagarm

9,2314 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Subjugation Over a year ago

Thank you. It seems to have fixed the email field. However for the ID field (minimum 4 digits, max 9 digits), no *ngIF error is coming up. changed it to:

<span *ngIf="newUser.get('Tz').errors?.minLength && newUser.get('Tz').touched">Your ID must be at least 4 digits long</span>                         <span *ngIf="newUser.get('Tz').errors?.maxLength && newUser.get('Tz').touched">Your ID must be at most 9 digits long</span>

Matt U Over a year ago

I agree. To eliminate the redundant newUser.get('...') calls you can create a getter in the component class for each field, such as get Email() { return this.newUser.get('Email'); } Then the code in your markup can remain as-is.

Collectives™ on Stack Overflow

TypeError, forms validators

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related