I have one reactive form validator sample. it shows validation error message initially before we enter value.
expected behavior is, after enter value it has to show error message
2 Answers
You have to check touched for your error message like this
<div *ngIf="check.errors.required && check.touched" class="e-error">
This field is required.
</div>
You are checking required so simply when you load the form then your field is obviously empty so it will throw the error.
You will get more information and example here : Built In Validators and Reactive Form Validattions
Comments
Create a Form Service and Use Mark FormGroup Touched so that it will defaultly don't display the Error Messages
import { FormService } from './services/form';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.scss' ]
})
export class AppComponent {
public testForm: FormGroup;
ngOnInIt(){
this.testForm.valueChanges.subscribe((data) => {
this.FormService.markFormGroupTouched(this.testForm);
})
}
}
3 Comments
Kumaresan Sd
Hi Balaji, thanks for your support.... did you check this with my sample...but it is not working
Kumaresan Sd
can you please , apply your idea into that sample.?
balajivaishnav
@kumaresan_sd sure will apply this to your solution, please wait
Why check dirty and touched?