Question

我正面临以下错误。尽管我定义了所有内容，但是我在代码中找不到任何未定义的内容。我也粘贴了我的代码，请检查为什么我遇到错误。

core.js:14597 ERROR TypeError: Cannot read property 'get' of undefined
    at BaseFormComponent.get [as idNumber] (http://localhost:4200/main.js:3636:44)
    at http://localhost:4200/vendor.js:145383:9
    at Array.forEach (<anonymous>)............

我的html代码：-

 <form class="flex flex-column flex-row-ns flex-wrap mt2" [formGroup]="identificationForm" >
     <mat-form-field class="w-50-ns pr2-ns">
    <mat-label>License Number</mat-label>
    <input matInput placeholder="" formControlName="idNumber"/>
  </mat-form-field>
  <mat-error *ngIf="idNumber.invalid && idNumber.touched">
      {{ titleAlert }}
    </mat-error>

    </form>

我的ts代码：-

export class IdentificationComponent extends BaseFormComponent implements OnInit  {
    identificationForm: FormGroup;
    formBuilder: FormBuilder;
    idType: Array<any>;
    states: Array<any>;
    titleAlert: string = 'This field is required';

    constructor() {
        super();
    }

    ngOnInit() {
        this.initializeForm();

    }

    initializeForm() {
        this.identificationForm = this.formBuilder.group({
            id: ['', [Validators.required]],
            state: ['', [Validators.required]],
            idNumber: ['', [Validators.required]],

        });
    }

    get idNumber() {
        return this.identificationForm.get('idNumber') as FormControl;
    }
    }

Answer 1

是否有可能是时间问题？您是否要绑定到表单上的<h1>Pure Css responsive <span>timeline</span></h1> <div class="container"> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>First Year</h3> <span>Some work experience</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p> </div> </div> <div class="timeline-block timeline-block-left"> <div class="marker"></div> <div class="timeline-content"> <h3>Seconed Year</h3> <span>Some work experience</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.&lrm;</p> </div> </div> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>Third Year</h3> <span>Some work experience</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p> </div> </div> <div class="timeline-block timeline-block-left"> <div class="marker"></div> <div class="timeline-content"> <h3>Fourth Year</h3> <span>Some work experience</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.&lrm;</p> </div> </div> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>Fifth Year</h3> <span>Some work experience</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p> </div> </div> </div>？也许就是这样：

idNumber

绑定可能是在初始化表单之前发生的。

尽管我只是在代码中尝试了类似的操作，但在我的示例中它没有引发异常（尽管我没有使用材质设计）。因此，它必须是针对您的方案的特定内容（因此需要进行堆栈闪电攻击。）

您可以尝试以下方法：

<mat-error *ngIf="idNumber.invalid && idNumber.touched">

Answer 2

两件事：

使用* ngIf避免出现初始错误

<form *ngIf="identificationForm" [formGroup]="identificationForm" >

使用identificationForm.controls.idNumber引用“ idNumber”

<mat-error *ngIf="identificationForm.controls.idNumber.invalid && 
                  identificationForm.controls.idNumber.touched">

注意：从Angular 7开始，您可以将其称为myForm.controls.nameOfField-不必使用myForm.get（'nameOfField'）-

Angular-Reactive-Forms，出现错误，无法读取未定义的属性“ get”

2 个答案: