角度7中的触摸事件没有任何反应

Question

 <div class="register_input">
       <span class="red">*</span>
       <label>First Name</label>
       <input maxlength="30" formControlName="firstName" type="text" required>
       <p>{{contactUsForm.value | json}}</p>
       <p *ngIf="firstName.touched">Touched</p>
 </div>

Component Snippet:

import {Component} from "@angular/core";
import {Router} from '@angular/router';
import {FormControl, FormGroup, FormBuilder,Validators} from '@angular/forms';
@Component({
  selector:'contact us',
  templateUrl:'./contact-us.component.html'
})
export class ContactUsComponent {
  contactUsForm: FormGroup;
  constructor( private route: Router, private formBuilder: FormBuilder) {
  }
  ngOnInit(){
      this.main();
  }

  main() {
    this.contactUsForm = this.formBuilder.group({
    firstName: '',
    lastName: '',
    email: '',
    phoneNumber:''
  });
  }

the <p> doesn't appear when I click on the input or even if I enter text. I am using a reactive form. I have added the component also.

Answer 1

Replace firstName.touched with contactUsForm.get('firstName').touched (I thinks contactUsForm is your form name)

<p *ngIf="contactUsForm.get('firstName').touched">Touched</p>

Maybe it will work for you.

You can also create getter in ts file and use here like

get getFirstName() {
  return this.contactUsForm.get('firstName').touched;
}

<p *ngIf="getFirstName.touched">Touched</p>

Answer 2

Try like this:

create boolean method like isFieldTouched() with if condition on p tag

<div class="register_input">
   <span class="red">*</span>
   <label>First Name</label>
   <input maxlength="30" formControlName="firstName" type="text" required>
   <p>{{contactUsForm.value | json}}</p>
   <p *ngIf="isFieldTouched('firstName')">Touched</p>
 </div>

ts file

  contactUsForm: FormGroup;

  constructor( private formBuilder: FormBuilder) {}

  ngOnInit(){
    this.main();
  }

  isFieldTouched(field: string): boolean {
    return this.contactUsForm.get(field).touched;
  }

   main() {
   this.contactUsForm = this.formBuilder.group({
   firstName: ['',Validators.required],
   lastName: ['',Validators.required],
   email: ['',Validators.required],
   phoneNumber:['',Validators.required],
   });
  }

Answer 3

This works for me

<form #frm="ngForm">
  <div class="register_input">
    <span class="red">*</span>
    <label>First Name</label>
    <input maxlength="30" name="firstName" id="firstName" #firstName="ngModel" [(ngModel)]="firstNameValue" type="text"
      required>
    <p>{{contactUsForm.value | json}}</p>
    <p *ngIf="firstName.touched">Touched</p>

  </div>

</form>

Make sure you include the FormModule in your app modules.

Edit: If you would like to use reactive forms, it would be like how @Dhawal said, so the full solution would look like this

html:

<form [formGroup]="contactUsForm">
<div class="register_input">
    <span class="red">*</span>
    <label>First Name</label>
    <input maxlength="30" formControlName="firstName" type="text" required>
    <p>{{contactUsForm.value | json}}</p>
    <p *ngIf="contactUsForm.get('firstName').touched">Touched</p>
</div>
</form>

Component:

export class AppComponent {
  contactUsForm: FormGroup;

  ngOnInit(){
      this.main();
  }

  main() {
    this.contactUsForm =  new FormGroup({
      firstName: new FormControl()
   });
}

to add required validation you can do something like this as Nenad Radak

firstName: ['', Validators.required]

instead of

firstName: new FormControl()