Forms 角度2形式验证，hasError不是函数

我尝试对输入字段进行验证

这是我使用的一段代码：

部门组件

import {  
  FORM_DIRECTIVES,  
  FormBuilder,  
  ControlGroup,  
  Validators ,
   AbstractControl   
} from 'angular2/common';




@Component({
    selector: 'my-departments',
    providers: [HTTP_PROVIDERS, DepartmentService],
    directives: [FORM_DIRECTIVES, Alert],
    styleUrls: ['app/department.component.css'],
    templateUrl: 'app/department.component.html',
    pipes:[SearchPipe]

})

export class DepartmentComponent implements OnInit {
    myForm: ControlGroup;
    departmentName: AbstractControl;
    departmentLocation: AbstractControl;

    constructor(private _router: Router, private _departmentService: DepartmentService, fb: FormBuilder) { 

      this.myForm = fb.group({  
        'departmentName':  ['', Validators.required],
        'departmentLocation':  ['', Validators.required]  
      });

      this.departmentName= this.myForm.controls['departmentName'];  
      this.departmentLocation= this.myForm.controls['departmentLocation'];  
    }

部门组件模板

   <form [ngFormModel]="myForm"  
          (ngSubmit)="addDepartment(newItem)" [hidden]="!showAddView" align="center">
        <div>       
            <label for="editAbrv">Department name:</label><br>
              <input type="text" [(ngModel)]="newItem.departmentName" [ngFormControl]="myForm.controls['departmentName']" > 

         <div *ngIf="departmentName.hasError('required')"  class="ui error message"><b style="color:red;">Name is required</b></div>  
      </div>

        <div>
            <label for="editAbrv">Department Location:</label><br>
             <input type="text" [(ngModel)]="newItem.departmentLocation" [ngFormControl]="myForm.controls['departmentLocation']" > 

         <div *ngIf="departmentLocation.hasError('required')" class="ui error message"><b style="color:red;">Location is required</b></div>  
      </div> 


        <div>
            <button type="submit" class="ui button">Submit</button>  
            <button><a href="javascript:void(0);" (click)="showHide($event)" >
                Cancel
            </a></button>
        </div>
</form> 

部门名称：

名称是必需的
部门位置：

位置是必需的
提交

---

问题是我遇到了一个错误：.hasError不是函数。hasError函数在我的html文件中（你可以看到），我真的不知道哪里错了。我做了教程中描述的所有事情，但不明白为什么会发生这种情况。谢谢你的建议

您应该使用

*ngIf=“myForm.controls['departmentLocation'].hasrerror（'required'）”

或者你的运气好一点

---

this.departmentName=this.myForm.controls.find（'departmentName'）？
代替
hasrerror
您应该使用
errors

i、 应该是的

myForm.controls['departmentLocation'].errors['required']

i、 带*ngIf的e

*ngIf="myForm.controls['departmentLocation'].errors['required']"

这类似于我在这里提供的另一个答案：

要点是typescriptgetter可以用一种干净的方式来解决这个问题

在组件类中：

get departmentLocation() { 
    return this.myForm.get( 'departmentLocation' );
}

在组件模板中：

<input type="text" formControlName="departmentLocation">
<p class="ui error message" *ngIf="departmentLocation.hasError('required')">Department location is required</p>


部门位置是必需的


同样重要的是要注意，在Angular 6+中使用带有反应形式的ngModel是不受欢迎的，因此从上面的示例中删除了它。
i使用时遇到编译错误

loginForm.get('email').hasError('required')

这把它修好了

loginForm.get('email')?.hasError('required')

像这样使用它

<mat-error *ngIf="!loginForm.get('password')?.hasError('required')
          && loginForm.get('password')?.hasError('whitespace')">


试试
*ngIf=“departmentLocation？”.hasError（'required'）”
我用它来解决：*ngIf=“myForm.controls['departmentName'].hasError（'required'）”。我只是不清楚它为什么会这样工作：/但是这些行
this.departmentName=this.myForm.controls['departmentName']是否在构造函数中？您的代码并不完全清楚，因为缺少了一个
}
；我想我没有错过。我只是没有复制整个类实现：）那么缩进是错误的（修复了它）。太奇怪了。我不明白为什么这不起作用。当我使用这个时，它就起作用了。departmentName=this.myForm.controls.find（'departmentName'）；。真奇怪，因为在教程中我发现了这个。departmentName=this.myForm.controls.find['departmentName']；谢谢：）使用这种方法，当控件有效时（因此，
errors
为null），它会向我显示下一条消息：
无法读取null的属性'required'
快速技巧可能是检查error是否为not null（对于控件中没有错误的情况），即*ngIf=“myForm.controls['departmentLocation']。errors&&myForm.controls['departmentLocation'].errors['required']”为防止出现非空错误，请将其用作
myForm.controls['departmentLocation'].errors？.required
为什么人们不直接使用符号呢？它更容易阅读。我知道重点是['--']但事实上，它只是一个物体，应该如此对待。这个答案之所以大部分是正确的，是因为这就是物体中的东西。如果人们能够阅读物体，这个答案会更容易为自己找到