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>

组件片段：

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:''
  });
  }

当我单击输入或输入文本时，<p>不会出现。我正在使用反应形式。我还添加了该组件。

Answer 1

将firstName.touched替换为 contactUsForm.get('firstName').touched（我认为contactUsForm是您的表单名称）

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

也许它将为您工作。

您还可以在ts文件中创建getter，并在此处使用

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

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

Answer 2

尝试这样：

使用isFieldTouched()标签上的if条件创建类似p的布尔方法

<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文件

  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

这对我有用

<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>

确保在您的应用模块中包含FormModule。

编辑：如果您想使用反应形式，就像@Dhawal所说的那样，因此完整的解决方案看起来像这样

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>

组件：

export class AppComponent {
  contactUsForm: FormGroup;

  ngOnInit(){
      this.main();
  }

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

要添加所需的验证，您可以像Nenad Radak这样执行

firstName: ['', Validators.required]

代替

firstName: new FormControl()

在7号角

3 个答案: