Angular TypeError：无法读取 null 的属性“必需”答案

【问题标题】：Angular TypeError: Cannot read property 'required' of nullAngular TypeError：无法读取 null 的属性“必需”
【发布时间】：2021-05-27 08:45:16
【问题描述】：

我有一个这样的简单输入表单

                    <form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="floatEmail">Product Name</label>
                                    <input type="text" class="form-control" id="floatEmail" name="floatEmail" formControlName="name" >
                                    <small class="form-text text-muted danger" *ngIf="f.name.errors.required" >Please enter a name!</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12 text-right">
                                <button type="button" class="btn btn-success btn-raised mr-1">Cancel</button>
                                <button type="button" class="btn btn-danger btn-raised" >Submit</button>
                            </div>
                        </div>
                    </form>

我只想验证和控制值。

.ts

 registerForm: FormGroup;

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      name: ['', Validators.required],

  });
  }
  get f() { return this.registerForm.controls; }

  onSubmit() {
    this.submitted = true;
    if (this.registerForm.invalid) {
        return;
    }
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value, null, 4));
  }

问题总是显示错误我想在点击后显示错误。

console.log 也显示这个错误

TypeError: Cannot read property 'required' of null

【问题讨论】：

标签： angular typescript

【解决方案1】：

您正在尝试通过在 typescript 中提交的 if 条件来显示，但您没有在 html 中使用。

这样试试

<form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="floatEmail">Product Name</label>
                <input type="text" class="form-control"  name="name" formControlName="name" >
                <div *ngIf="submitted && f.name.errors">
                    <small class="form-text text-muted danger" *ngIf="f.name.errors.required" >Please enter a name!</small>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-12 text-right">
            <button type="button" class="btn btn-success btn-raised mr-1">Cancel</button>
            <button type="button" class="btn btn-danger btn-raised" (click)="onSubmit()">Submit</button>
        </div>
    </div>
</form>

它会在警报中向您显示数据，您可以根据需要使用控制台或任何东西。

【讨论】：

【解决方案2】：

如果没有错误则f.name.errors in

ngIf="f.name.errors.required"

将为空。使用 nullsafe 运算符

ngIf="f.name.errors?.required"

【讨论】：

【解决方案3】：

您试图在提交时显示错误，在表单中将提交类型从type="button" 更改为type="submit"。

我还添加了附加条件

<div *ngIf="submitted && registerForm.controls.name.errors">
      <small class="form-text text-muted danger" *ngIf="f.name.errors.required" 
        >Please enter a name!</small>
</div>

示例代码：https://stackblitz.com/edit/angular-ivy-wq3kzj?file=src/app/app.component.html

【讨论】：