Question

corporate.html

          <form #f="ngForm" name="corporateProfileForm" ng-submit="corporateFrmSave(objDS, objDSCurrency)" novalidate="">
             <div class="row  form-group">
               <div class="col-md-12" >                                                      
                  <input type="text" *ngIf="formData"  [(ngModel)]="formData.Corporate_Id"  id="corpid" title="Corporate ID" tab-index="1" name="corpid" maxlength="20"  #corpid="ngModel"  required/>
                 <label for="corp"><b>Corporate ID</b></label>
                 <div *ngIf="corpid.invalid && (corpid.dirty || corpid.touched)"  class="alert alert-danger">
                  <div *ngIf="corpid.errors.required">
                       Name is required.
                   </div>
                   <div *ngIf="ncorpidame.errors.minlength">
                       Name must be at least 4 characters long.
                   </div>
                   <div *ngIf="corpid.errors.forbiddenName">
                       Name cannot be Bob.
                   </div>

                  </div>
                   </div>
                </div>
           </form>

我收到错误消息

错误类型错误：无法读取属性＆＃39;无效＆＃39;未定义的

Answer 1

这是因为corpid是undefined，您可以在您的组件中定义corpid

corpid : any = {}

或者您还可以在*ngIf中添加一个条件，在模板中添加：

<div *ngIf="corpid && corpid.invalid && (corpid.dirty || corpid.touched)"  class="alert alert-danger">

Answer 2

确保使用以下结构定义变量：

TS文件

export class ContactComponent implements OnInit {

  myform: any;
  corpid: FormControl;

  constructor() {

   }
  ngOnInit() {
    this.createFormControls();
    this.createForm();
  }

  createFormControls() {
    this.corpid= new FormControl('', Validators.required);
  }

  createForm() {
    this.myform = new FormGroup({
      corpid: this.corpid,
    });
  }

HTML文件

<div class="md-form form-sm form-group"
     [ngClass]="{
     'invalid': corpid.invalid && (corpid.dirty || corpid.touched),
     'valid': corpid.valid && (corpid.dirty || corpid.touched)
     }">
<i class="fa fa-user prefix"></i>
<input 
    type="text" id="corpid" class="form-control"
    required
    [formControlName]="'corpid'">
    <label for="corpid" class="">Your corpid</label>
</div>

<div class="form-control-feedback"
     *ngIf="corpid.errors && (corpid.dirty || corpid.touched)">
  <p *ngIf="corpid.errors.required">corpid is required</p>
</div>

很难分辨，因为问题不在您的HTML剪辑中，而是在.ts文件中。我希望我的代码能够提供帮助

Answer 3

问题在于*ngIf，因此在检查该条件时，Angular会渲染模板的其余部分，而在评估*ngIf时的一小部分时间内，模板引用变量corpid不存在，因此在尝试检查验证时会抛出错误。

将输入字段包含 *ngIf内的验证div，而不是仅在输入字段中应用。

<div class="row  form-group" *ngIf="formData">
  <input [(ngModel)]="formData.Corporate_Id" id="corpid" ... >
  <!-- more code here... -->
</div>

<强> DEMO

为什么验证不起作用？

3 个答案: