时间戳

首页 > 解决方案 > “字符串”类型不存在属性“错误”

angular - “字符串”类型不存在属性“错误”

问题描述

我该如何解决这个错误？如果我将变量设为 null，它似乎会消失，但它只会产生另一个类似的错误。

“字符串”类型不存在属性“错误”。

我想要的只是使用 Angular ValidatorngClass并向我的表单组添加一个常规类，这样我就可以在它的子级上使用它ng-invalid，ng-touched等等。这*ngIf也不起作用。我假设它是相关的。

HTML

<form [formGroup]="aervform" id="aervform" #aervForm="ngForm">
  <div class="row">
    <div class="col">
      <!-- [ngClass]="{
        'is-invalid': 
          aervform.get('membersName').errors 
          && (
            aervform.get('membersName').touched
            || 
            aervform.get('membersName').dirty
          )
      }" -->
      <div 
        class="form-group mb-2" 
        [ngClass]="{
          'is-invalid': 
            membersName.errors 
            && (
              membersName.touched 
              || 
              membersName.dirty
            ), 
          'is-valid':membersName.valid
        }">
        <label for="membersName" class="form-label">Member's Name</label>
        <input
          type="text"
          name="membersName"
          [(ngModel)]="membersName"
          formControlName="membersName"
          class="form-control"
          id="membersName"
          required
        />
        <span>Is it touched?: </span>{{this.aervform.controls.membersName.touched}}<br/>
        <span>Is it dirty?: </span>{{this.aervform.controls.membersName.dirty}}<br/>
        <span>Is it valid?: </span>{{this.aervform.controls.membersName.valid}}<br/>

        <div 
          class="is-invalid" 
          *ngIf="membersName.errors && (membersName.touched || membersName.dirty)">
          Field is required.
        </div>
      </div>
    </div>
  </div>      
</form>

零件

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  aervform: FormGroup;

  membersName: string = "";

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.aervform = this.fb.group({
      membersName: ["", [Validators.required]]
    });
  }
}

这是一个StackBlitz，谢谢

标签： angular

解决方案

在 app.module 中，您需要导入正确的模块

import { ReactiveFormsModule } from "@angular/forms";

然后在输入字段上使用

formControlName="membersName"

要访问 FormGroup 中的字段（以显示错误消息），您需要完整路径。不仅仅是一个字段名称，如formControlName

工作堆栈闪电战

推荐阅读