Angular 如何使用带角材料的活性模板组

我用的是反应型组和角材料设计。但是，我得到了一个错误：

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

指向这行代码：

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

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>

添加字段
字段名是必需的
文本字段
单选按钮
取消
添加字段

您有两种选择

选项1

用一个div或span将元素包裹在下面的复选框中

*ngIf="fieldName && fieldName.invalid"

选项2

始终使用：

fieldName?.invalid

---

当您想访问fieldName的无效属性时，因为您在typescript中没有存储FormControl对象的变量（例如fieldName:FormControl），您不能在html模板中使用

*ngIf=“fieldName.invalid”

，因为

fieldName

不是变量

---

我通过从表单变量（form:FormGroup）

*ngIf=“form.get（'fieldName'）？”获取控件来解决问题。无效“

。同样在底部的按钮中，

[disabled]=“！form.dirty | | form？.invalid”

尝试

这个。无效的

而不是

字段名。无效的

？字段名如何？。无效。@RukshanDangalla，答案有效@拉胡达利我很高兴能帮上忙。请将其标记为已接受答案。感谢2018年这个答案可能是正确的，但2019年我可以说这个答案是误导性的，因为它只告诉我们如何抑制错误，而没有告诉我们如何修正错误。作者的问题是他错误地访问了该财产。他的代码假定fieldName是组件上的属性，但事实并非如此，这就是它未定义的原因。访问属性的正确方法是form.controls.fieldName。FormGroup上的“控件”字段是包含所有FormControl实例的对象

fieldName?.invalid