Angular2 和 ngIf答案

【问题标题】：Angular2 and ngIfAngular2 和 ngIf
【发布时间】：2017-08-22 20:32:24
【问题描述】：

以下 Angular 2（4.3.5 版）代码无法按预期工作。

<link 
    rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 
    integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
    crossorigin="anonymous">   
<script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" 
    integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous">
</script>
<form style="margin:50px;">
    <div class="form-control">
        <label for="firstName">First Name</label>
        <input 
            ngControl="firstName" 
            id="firstName" 
            #firstName 
            type='text' 
            class='form-control' 
            required>
        <div 
            class="alert alert-danger" 
            *ngIf="!firstName.valid && firstName.touched">
                A first name is required
        </div>
    </div>
    <br/>
    <button class="btn btn-primary" type="submit">
        Submit!
    </button>
</form>

当ngIf 语句是

*ngIf="!firstName.valid"

错误消息div 在页面加载时显示，在输入文本后仍然可见。

当ngIf声明如上时

*ngIf="!firstName.valid && firstName.touched"

错误信息未显示。

我错过了什么？谢谢 A.G.

【问题讨论】：

您导入的是“FormsModule”，而不是“ReactiveFormsModule”，对吗？尝试将 ngControl 替换为 [(ngModel)] 并添加名称属性。

标签： angular validation

【解决方案1】：

我认为您需要通过放置 ="ngControl" 或 ="ngModel" 来指定 # 引用的模板变量的类型

<input ngControl="firstName" 
        id="firstName" 
        #firstName="ngForm"   // or ngModel if you're using 2-way binding
        type='text' 
        class='form-control' 
        required>
    <div 
        class="alert alert-danger" 
        *ngIf="!firstName.valid && firstName.touched">
            A first name is required
    </div>

请看这里：Angular2 Forms :Validations, ngControl, ngModel etc

【讨论】：

我尝试过使用#firstName="ngForm" 并使用浏览器的开发者工具看到以下错误。 code 未捕获错误：模板解析错误：没有将“exportAs”设置为“ngForm”的指令（“First Name ]#firstName="ngForm" type='text' class='form-control' required> ... 当指令添加到组件时 @Component({ ... exportAs : 'ngForm' } ) 发生同样的错误。
组件中是否导入了ngForm？一个笨拙的人会有所帮助。我认为要让 ngForm / ngModel / ngControl 正常工作，它们需要被包装在一个 ngForm 元素中。
...你的表单的其余部分......
如果你这样做，“f”是你的 ngForm 对象的名称，然后你可以访问里面的属性它像 f.firstName 等。

【解决方案2】：

添加了一个类 Contact 与 firstName 和 comment 属性在 app.module.ts 中导入 FormsModule 将 Contact 类型的属性和初始化模型添加到 ContactFormComponent 类型

<form #contactForm='ngForm' style='margin:50px;'>
    <div class='form-group'>
        <label for='firstName'>First Name</label>
        <br />
        <input id='firstName' type='text' class='form-control' [(ngModel)]='model.firstName' required name='firstName' #firstName="ngModel"
            (change)='onChange(ngModel)'>
        <div [hidden]="firstName.valid || firstName.pristine" class="alert alert-danger">
            A first name is required.
        </div>
    </div>
    <div class='form-group'>
        <label for='comment'>Comment</label>
        <br />
        <textarea id='comment' class='form-control' [(ngModel)]='model.comment' required name='comment' #comment="ngModel" ></textarea>
        <div [hidden]="comment.valid || comment.pristine" class="alert alert-danger">
            A comment is required.
        </div>
    </div>
    <button class='btn btn-primary' type='submit'>
         Submit
    </button>
</form>

在遵循https://angular.io/guide/forms 的示例之后进行了更改，现在组件按预期工作。

【讨论】：