例外:未捕获(承诺):TypeError:无法读取 null 的属性“touched”

我正在尝试在我的 Angular2 应用程序中使用响应式表单,但我遇到了如下异常

例外:未捕获(承诺):TypeError:无法读取 null 的属性“touched”类型错误:无法读取 null 的属性“touched”

我的示例代码如下

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import {FormGroup, FormControl} from '@angular/forms';
import { Customer } from './customer';

@Component({
moduleId:module.id,
templateUrl: 'sign-up.reactiveForms.html'
})

export class SignupComponent  {

customer: Customer= new Customer();


customerForm : FormGroup; //it assosciate html element with this root model

ngOnInit() : void {


   this.customerForm=new FormGroup({

        firstName: new FormControl(),
         lastName: new FormControl(),
         email: new FormControl(),
         sendCatalog: new FormControl(true)

   });
}

save() {
    console.log(this.customerForm);
  }

}

sign-up.reactiveForms.html 文件如下

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>

我想弄清楚为什么 touch 属性为空。

AJT82

尝试初始化您的表单控件,以便它们不会null

this.customerForm=new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    email: new FormControl(''),
    sendCatalog: new FormControl(true)
});

否则,使用安全导航操作符可能会删除空错误,例如:

customerForm.get('firstName')?.touched

但是,仅初始化表单控件应该(希望)做到这一点。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

未捕获的TypeError:无法读取null的属性“ on”

来自分类Dev

未捕获的TypeError:无法读取null的属性

来自分类Dev

未捕获(承诺)类型错误:无法读取 null 的属性“值”

来自分类Dev

未捕获的TypeError:无法读取null的属性“ classList”

来自分类Dev

未捕获的typeError:无法读取null的属性'querySelectorAll'

来自分类Dev

未捕获的TypeError:无法在React中读取null的属性“状态”

来自分类Dev

未捕获的TypeError:无法读取null的属性'appendChild'

来自分类Dev

未捕获的TypeError:无法读取null的属性“ 0”

来自分类Dev

未捕获的TypeError:无法读取null的属性“值”

来自分类Dev

未捕获的TypeError:无法读取null的属性'getContext'

来自分类Dev

未捕获的TypeError:无法读取null的属性“ clientHeight”

来自分类Dev

未捕获的TypeError:无法读取null的属性'__e3_'

来自分类Dev

未捕获的TypeError:无法读取null,AjAX的属性'documentElement'

来自分类Dev

未捕获的TypeError:无法读取null的属性“ play,src或click”

来自分类Dev

未捕获的TypeError:无法读取null的属性'documentElement'

来自分类Dev

未捕获的TypeError:无法读取null的属性“ nodeType”

来自分类Dev

Ember JS:未捕获的TypeError:无法读取null的属性'createRecord'

来自分类Dev

摩卡测试:未捕获的TypeError:无法读取null的属性“状态”

来自分类Dev

未捕获的TypeError:无法读取null的属性“ props”

来自分类Dev

未捕获的TypeError:无法读取null的属性“ insertAdjacentHTML”

来自分类Dev

REACT未捕获的TypeError:无法读取null的属性“ load”

来自分类Dev

未捕获的TypeError:无法读取null的属性'addEventListener'(querySelector)

来自分类Dev

VideoJS错误未捕获的TypeError:无法读取null的属性'nodeName'

来自分类Dev

未捕获的TypeError:无法读取null的属性'getElementsByClassName' HTML | JS

来自分类Dev

未捕获的TypeError:无法读取null的属性“ collection”

来自分类Dev

未捕获的TypeError:无法在jquery上读取null的属性“ ownerDocument”

来自分类Dev

未捕获的TypeError:无法读取null的属性“ add”

来自分类Dev

未捕获的TypeError:无法读取null的属性“ classList”

来自分类Dev

未捕获的TypeError:无法读取null的属性“ join”

Related 相关文章

  1. 1

    未捕获的TypeError:无法读取null的属性“ on”

  2. 2

    未捕获的TypeError:无法读取null的属性

  3. 3

    未捕获(承诺)类型错误:无法读取 null 的属性“值”

  4. 4

    未捕获的TypeError:无法读取null的属性“ classList”

  5. 5

    未捕获的typeError:无法读取null的属性'querySelectorAll'

  6. 6

    未捕获的TypeError:无法在React中读取null的属性“状态”

  7. 7

    未捕获的TypeError:无法读取null的属性'appendChild'

  8. 8

    未捕获的TypeError:无法读取null的属性“ 0”

  9. 9

    未捕获的TypeError:无法读取null的属性“值”

  10. 10

    未捕获的TypeError:无法读取null的属性'getContext'

  11. 11

    未捕获的TypeError:无法读取null的属性“ clientHeight”

  12. 12

    未捕获的TypeError:无法读取null的属性'__e3_'

  13. 13

    未捕获的TypeError:无法读取null,AjAX的属性'documentElement'

  14. 14

    未捕获的TypeError:无法读取null的属性“ play,src或click”

  15. 15

    未捕获的TypeError:无法读取null的属性'documentElement'

  16. 16

    未捕获的TypeError:无法读取null的属性“ nodeType”

  17. 17

    Ember JS:未捕获的TypeError:无法读取null的属性'createRecord'

  18. 18

    摩卡测试:未捕获的TypeError:无法读取null的属性“状态”

  19. 19

    未捕获的TypeError:无法读取null的属性“ props”

  20. 20

    未捕获的TypeError:无法读取null的属性“ insertAdjacentHTML”

  21. 21

    REACT未捕获的TypeError:无法读取null的属性“ load”

  22. 22

    未捕获的TypeError:无法读取null的属性'addEventListener'(querySelector)

  23. 23

    VideoJS错误未捕获的TypeError:无法读取null的属性'nodeName'

  24. 24

    未捕获的TypeError:无法读取null的属性'getElementsByClassName' HTML | JS

  25. 25

    未捕获的TypeError:无法读取null的属性“ collection”

  26. 26

    未捕获的TypeError:无法在jquery上读取null的属性“ ownerDocument”

  27. 27

    未捕获的TypeError:无法读取null的属性“ add”

  28. 28

    未捕获的TypeError:无法读取null的属性“ classList”

  29. 29

    未捕获的TypeError:无法读取null的属性“ join”

热门标签

归档