Question

我正在使用具有Angular Material设计的反应形式组。但是，我收到了一个错误：

错误类型错误：无法读取未定义
的属性“无效”

指向这行代码：

<input formControlName="fieldName" ngDefaultControl matInput placeholder="Field Name">
<mat-error *ngIf="fieldName.invalid">
  Field name is required
</mat-error>

TS：

export class AddFieldComponent implements OnInit {
  form: FormGroup;

  constructor(public fb: FormBuilder) {
      this.form = this.fb.group({
        fieldName: ['', Validators.required],
        fieldType: ['', Validators.required]
      });
    }
  }

HTML

<div [formGroup]="form" class="add-field">
  <div mat-dialog-content>
    <h2>Add Fields</h2>
    <mat-form-field>
      <input formControlName="fieldName" ngDefaultControl matInput placeholder="Field Name">
      <mat-error *ngIf="fieldName.invalid">
        Field name is required
      </mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-select formControlName="fieldType">
        <mat-option value="text-field">Text Field</mat-option>
        <mat-option value="radio-btn">Radio Button</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div mat-dialog-actions>
    <span class="right-align-next-element"></span>
    <button class="secondary-btn" mat-button (click)="closeModal()">Cancel</button>
    <button [disabled]="fieldName.invalid" class="primary-btn" mat-button (click)="addFields()" cdkFocusInitial>Add field</button>
  </div>
</div>

Answer 1

你有两种选择。

选项1

使用div或span用下面的检查

包裹元素

*ngIf="fieldName && fieldName.invalid"

选项2

始终使用：

fieldName?.invalid

如果要访问fieldName的无效属性

Answer 2

由于在打字稿中没有用于存储FormControl对象的变量（例如fieldName：FormControl），因此无法在html模板中使用*ngIf="fieldName.invalid"，仅因为fieldName不是变量。 / p>

我通过从表单变量（表单：FormGroup）*ngIf="form.get('fieldName')?.invalid"获取控件来解决。同样在底部[disabled]="!form.dirty || form?.invalid"的按钮中。

如何使用带有角度材质的Reactive FormGroup

2 个答案: