angular表单验证不生效d

[zxp1103]

前端用的angular框架，写了个模板文件，里面的表单验证一直不对，会报错：

core.es5.js:1020 ERROR TypeError: Cannot read property 'valid' of undefined

其它功能都是正常的。
HTML文件如下：

<form *ngIf="desc" (ngSubmit)="f.form.valid && onCreate()" #f="ngForm" novalidate>
  <div class="help-block error box" *ngIf="errors">
    <ul>
      <li *ngFor="let error of errors">{{ error }}</li>
    </ul>
  </div>
  <ng-template ngFor let-field [ngForOf]="desc.fields">
    <div class="form-group" *ngIf="field.isEditableOnCreate" [ngClass]="{ 'warn': f.submitted && input && !input.valid }" [ngSwitch]="field.dataType">
      <label for="{{ field.name }}">{{ field.displayName }}</label>
      <div class="select" *ngIf="referenceFields && referenceFields[field.name]; else elseBlock">
        <select name="{{ field.name }}" [(ngModel)]="model[field.name]" #input="ngModel">
          <option *ngFor="let opt of referenceFields[field.name]" [value]="opt.id">{{ opt.displayName || opt.name || opt.internalReferenceId }}</option>
        </select>
      </div>
      <ng-template #elseBlock>
        <input *ngSwitchCase="EntityFieldDataType.boolean" type="checkbox" class="form-control" name="{{ field.name }}" [(ngModel)]="model[field.name]"
          #input="ngModel" />
        <textarea *ngSwitchCase="EntityFieldDataType.text" type="text" class="form-control" name="{{ field.name }}" [(ngModel)]="model[field.name]"
          #input="ngModel"></textarea>
        <input *ngSwitchCase="EntityFieldDataType.dateTime" type="date" class="form-control" name="{{ field.name }}" [(ngModel)]="model[field.name]"
          #input="ngModel" />
        <input *ngSwitchDefault type="text" class="form-control" name="{{ field.name }}" [(ngModel)]="model[field.name]" #input="ngModel"
          [required]="field.isRequired" />
      </ng-template>
      <div *ngIf="f.submitted && !input.valid" class="help-block">请填写{{ field.displayName }}</div>
    </div>
  </ng-template>
  <ng-content></ng-content>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">{{ createText }}</button>
  </div>
</form>

发生这个错误之后，页面就会出现问题重复加载的问题，不能正常的刷新，除非自己强制刷新。
如下图：


求大神赐教

[讨厌走开啦]

引用 2 楼 zxp1103 的回复:

[quote=引用 1 楼 讨厌走开啦 的回复:] js贴出来，一般重复渲染的问题是由于有原生js（或者jquery）和angular操作同一个dom引起的。

谢谢回复。 用的是TypeScript，因为是MVVM框架，所以自己并没有用代码去操作dom。 并且这个问题也是因为那个表单验证报错之后才会出现哦 TS代码如下：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { EntityDescription } from '../entity-description';
import { EntityFieldDataType } from '../entity-field-data-type.enum';

@Component({
  selector: 'app-entity-create',
  templateUrl: './entity-create.component.html'
})
export class EntityCreateComponent implements OnInit {

  @Input() desc:EntityDescription;
  @Input() createText:string;
  @Input() errors:any[];
  model:any = {};
  @Input() referenceFields:{[fieldName:string]:any[]};
  @Output() create:EventEmitter<any> = new EventEmitter<any>();
  EntityFieldDataType = EntityFieldDataType;

  constructor() { }

  ngOnInit() {
  }

  onCreate() {
    this.create.emit(this.model);
  }

}

[/quote] 这里用TypeScript和我之前说的“有原生js（或者jquery）和angular操作同一个dom”实质是一样的，你用TypeScript操作dom一样会有重复渲染的问题，有2个方案： 1.用TypeScript操作angular作用域下左侧菜单列表对应的angular变量（不直接操作dom）； 2.每次变更左侧菜单的时候清空dom。

[讨厌走开啦]

js贴出来，一般重复渲染的问题是由于有原生js（或者jquery）和angular操作同一个dom引起的。

[zxp1103]

引用 1 楼 讨厌走开啦 的回复:

js贴出来，一般重复渲染的问题是由于有原生js（或者jquery）和angular操作同一个dom引起的。

谢谢回复。 用的是TypeScript，因为是MVVM框架，所以自己并没有用代码去操作dom。 并且这个问题也是因为那个表单验证报错之后才会出现哦 TS代码如下：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { EntityDescription } from '../entity-description';
import { EntityFieldDataType } from '../entity-field-data-type.enum';

@Component({
  selector: 'app-entity-create',
  templateUrl: './entity-create.component.html'
})
export class EntityCreateComponent implements OnInit {

  @Input() desc:EntityDescription;
  @Input() createText:string;
  @Input() errors:any[];
  model:any = {};
  @Input() referenceFields:{[fieldName:string]:any[]};
  @Output() create:EventEmitter<any> = new EventEmitter<any>();
  EntityFieldDataType = EntityFieldDataType;

  constructor() { }

  ngOnInit() {
  }

  onCreate() {
    this.create.emit(this.model);
  }

}

[zxp1103]

调用模块实例：

<h1>新建产品</h1>

<a routerLink="/products" class="btn btn-icon"><clr-icon shape="close"></clr-icon></a>

<app-entity-create [desc]="desc" [createText]="'创建产品'" [errors]="errors" [referenceFields]="referenceFields" (create)="create($event)"></app-entity-create>

TS文件：

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../_services/product.service';
import { EntityDescription } from '../entity-description';
import { ProductCategory } from '../product-category';
import { Router } from '@angular/router';
import { Product } from '../product';
import { ProductCategoryService } from '../_services/product-category.service';

@Component({
  selector: 'app-product-create',
  templateUrl: './product-create.component.html',
  providers: [ProductService, ProductCategoryService]
})
export class ProductCreateComponent implements OnInit {

  loading: boolean = false;
  desc: EntityDescription;
  errors: any[];
  referenceFields: { [fieldName: string]: any[] };

  constructor(private productService: ProductService, private productCategoryService: ProductCategoryService, private router: Router) { }

  ngOnInit() {
    this.getDesc().then(desc => this.getProductCategories());
  }

  getDesc(): Promise<EntityDescription> {
    return this.productService.getDesc()
      .then(desc => this.desc = desc);
  }

  getProductCategories() {
    this.productCategoryService.getCategories()
      .then(cats => this.referenceFields = { "categoryId": cats });
  }

  create(model: any) {
    if (this.loading)
      return;

    this.loading = true;

    let product = new Product();

    for (let field of this.desc.fields) {
      if (!field.isEditableOnCreate)
        continue;
      product[field.name] = model[field.name];
    }

    this.productService.createProduct(product)
      .then(product => this.router.navigate(['/products', product.id]))
      .catch(reason => {
        this.errors = [reason];
        this.loading = false;
      });
  }
}