首页 > 解决方案 > 如何以角度实现模板变量?

问题描述

我试图拉取 ngModel 对象以进行表单验证,但在服务时我的模板变量出现错误。

这是代码:

<form>
    <div class="form-group">
        <label for="courseName">Course Name</label>
        <br />
        <input type="text" id="courseName" ngModel name="courseName" #courseName="ngModel" required />
        <br />
        <div *ngIf="!courseName.valid" class="alert alert-danger">field is required</div>
        <label for="category">Category</label>
        <br />
        <select name="category" id="category" class="form-control-lg" ngModel>
            <option value="test">poop</option>
        </select>
        <div class="checkbox">
            <label for="checkbox">
                <input id="checkbox" type="checkbox" name="moneyBack" />30-day money back guarantee
            </label>
        </div>
    </div>
    <button class="btn btn-primary">Submit</button>
</form>

编辑
经过测试,我发现分配模板变量时出现问题,并且我注意到我的代码编辑器中的“#”符号与我正在观看的教程颜色不同,这意味着编辑器不是t 识别语法,因此该语法可能已被弃用(这是可能的,我正在遵循的教程似乎有点旧)或者我执行错误,声明模板变量的正确方法是什么?

或者更重要的是,大声笑

访问表单控件对象的正确方法是什么,以便我可以获得 .value、.pristine、.touched 属性?

<#templateVariable ngModel name="test"> **No Error**
<#templateVariable="ngModel" ngModel name="test>**ERROR**

编辑

编辑
问题在于命名ngModel和字段相同
编辑

这里是报错截图
这里是导入ngModel的截图

标签: javascriptangular

解决方案


使用这种方式

[(ngModel)]="courseName"

推荐阅读