forms - 表单控件未定义

Question

我的表格是按以下方式制作的:

<form #form="ngForm" novalidate (ngSubmit)="register(form);">
    <div class="registerinput">
        <label for="firstname">First Name</label>
        <input #firstname="ngModel" type="text" name="firstname" maxlength="30" pattern="[a-zA-Z ]*" required ngModel>
        <div [hidden]="!form.controls.firstname.touched && !form.controls.firstname.errors?.required" class="alert-danger">
            Please enter your name
        </div>
        <div [hidden]="!form.controls.firstname.touched && !form.controls.firstname.errors?.maxlength" class="alert-danger">
             Max length is 30 characters
        </div>
        <div [hidden]="!form.controls.firstname.touched && !form.controls.firstname.errors?.pattern" class="alert-danger">
             Only letters are allowed
        </div>
    </div>
    <div class="registerinput">
        <button type="submit" class="btn-register">Register</button>
    </div>
</form>

我收到以下错误:

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/register/register.component.html:7:17 caused by: Cannot read property 'touched' of undefined
Error: Error in http://localhost:3000/app/register/register.component.html:7:17 caused by: Cannot read property 'touched' of undefined

它似乎找不到我的控件。但是，当我尝试打印 form.controls 时，我得到以下结果:

所以在这种情况下，它发现它们很好。这里有什么问题？我过去做过类似的东西。

更新:我发现我必须使用 firstname.touched 来访问它们，而不是例如 form.controls.firstname.touched。我只是不明白为什么，因为我在同一个项目中有另一个文件，我在其中使用以完全相同的方式制作的表单，但在那个文件中我使用的是 form.controls.*。我猜你可以使用 firstname.touched 如果你已经声明了一个模板引用变量，但我不知道在什么情况下你可以使用 form.controls.*.

Answer 1

另一种验证方式是:

<form #form="ngForm" novalidate (ngSubmit)="register(form);">
    <div class="registerinput">
        <label for="firstname">First Name</label>
        <input #firstname="ngModel" type="text" name="firstname" maxlength="30" pattern="[a-zA-Z ]*" required ngModel>
        <div [hidden]="!firstname.touched && !firstname.errors?.required" class="alert-danger">
            Please enter your name
        </div>
        <div [hidden]="!firstname.touched && !firstname.errors?.maxlength" class="alert-danger">
             Max length is 30 characters
        </div>
        <div [hidden]="!firstname.touched && !firstname.errors?.pattern" class="alert-danger">
             Only letters are allowed
        </div>
    </div>
    <div class="registerinput">
        <button type="submit" class="btn-register" [disabled]='!form.valid'>Register</button>
    </div>
</form>

这是一种非常简单易行的方法。