Question

我尝试了反应形式并进行了一些验证，当“名字”字段为空时，我试图显示错误。但显示“ 错误TypeError：无法读取未定义的属性'firstName'”

这是我的.ts文件的代码

struct SettingsView: View {

    @EnvironmentObject var settings: UserSettings
    @Binding var showSheet: Bool

    @State var result: Result<MFMailComposeResult, Error>? = nil
    @State var isShowingMailView = false


    var body: some View {
        NavigationView {
            VStack {

             //SettingsView Window


            }.navigationBarTitle("Settings")
            .navigationBarItems(leading: Button("Done") {
                self.showSheet = false
            })

        }
    }
}

这是我的conponet.html页面的代码。此行显示错误：输入您的名字

import { Component, OnInit } from '@angular/core';
import{FormGroup, FormControl, FormBuilder, NgForm, Validators} from '@angular/forms';

@Component({
  selector: 'app-reactiveform',
  templateUrl: './reactiveform.component.html',
  styleUrls: ['./reactiveform.component.css']
})
export class ReactiveformComponent implements OnInit {

  signupForm:FormGroup;
  fName:string="";
  lName:string="";
  emailID:string="";
  pswd:string="";

  constructor(private formBuilder:FormBuilder) {
    this.signupForm=formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', [Validators.required, Validators.maxLength(10)]],
      Emailid: ['', [Validators.required, Validators.email]],
      PasswordN: ['', Validators.required]
    });
   }


  PostData(signupForm:any){
    console.log(signupForm.controls);
  }


  ngOnInit(): void {
  }

Answer 1

@Olivier评论说，它必须是：

signupForm.controls['firstName']...

和haserror()返回一个布尔值，在这种情况下* ngFor将不适用，而应使用* ngIf。

因此您的HTML代码将是：

<div *ngIf="signupForm.controls['firstName'].haserror(required)"> Enter Your First Name </div>

Answer 2

更改行

<div *ngFor="signupForm.control['firstName'].haserror(required)"> Enter Your First Name </div>

此行

 <div *ngIf="signupForm.controls.firstName.hasError('required')"> Enter Your First Name </div>

带有验证的角度反应形式：错误TypeError：无法读取未定义的属性“ firstName”

2 个答案: