I did forms in Angular 7 and I did *ngIf
conditions to say user, that he don't insert all data to forms. A tried to use !
before *ngIf
, and it is OK for Visual Studio Code, but it has the opposite effect.
This is error:
[Angular] Identifier 'name' is not defined. '__type' does not contain such a member property messageForm of RegisterComponent
HTML file:
<h1>Log in</h1>
<form [formGroup]="messageForm" (ngSubmit)="onSubmit()">
<h5 *ngIf="success">Your form is valid!</h5>
<label>
Tvoj nick:
<input type="text" formControlName="name">
<div *ngIf="submitted && messageForm.controls.name.errors" class="error">
<div *ngIf="messageForm.controls.name.errors.required">... aale no, tvoj nick potrebujeme, aby si mal svoj tim</div>
</div>
</label>
<label>
Email:
<input type="email" formControlName="email">
<div *ngIf="submitted && messageForm.controls.email.errors" class="error">
<div *ngIf="messageForm.controls.email.errors.required">Email je dolezity na zasielanie informacii pre teba</div>
</div>
</label>
<label>
Tvoje heslo:
<input type="password" formControlName="password">
<div *ngIf="submitted && messageForm.controls.password.errors" class="error">
<div *ngIf="messageForm.controls.password.errors.required">Heslo je zaklad registracie!</div>
</div>
</label>
<input type="submit" value="Zaregistruj sa" class="cta">
</form>
TS file:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
messageForm: FormGroup;
submitted = false;
success = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.messageForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required]
});
}
onSubmit(){
this.submitted = true;
if(this.messageForm.invalid){
return;
}
this.success = true;
}
}
Try to set validation this way
<div *ngIf="submitted && f.name.errors" class="invalid-feedback">
<div *ngIf="f.name.errors.required">Name is required</div>
</div>
In .ts
file
get f() { return this.messageForm.controls; }
Update
<div *ngIf="name?.errors.required">Name is required.</div>
this.messageForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(3)]]
});
Update email validation issue
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.