输入时没有表单标签的表单验证 - Angular 2答案

【问题标题】：Form validation without form tag on input - Angular 2输入时没有表单标签的表单验证 - Angular 2
【发布时间】：2018-04-04 22:16:13
【问题描述】：

我有弹出组件，我想在输入元素上插入表单验证以获取名称（必填字段和最小长度 3 个字符）。是否可以在没有在表单标签中设置完整代码的情况下做到这一点？

<div class="scenario-div">
<label style="font-size: 1.4rem; font-weight: 400; margin-bottom: 10px;">{{context.header}}</label>
<div class="" style="width: 90%; margin-bottom: 10px; align-self: center;">
    <div style="display: flex; flex-direction: column; margin-bottom: 10px;">
        <label style="font-size: 1.2rem; font-weight: 500;">Name</label>
        <div style="display:flex; flex-direction:row;">
            <input type="text" [(ngModel)]="context.name" placeholder="enter Name" style="color: #569bd2; margin: 0px; width: 50%" minlength="3" required/>

            <select *ngIf="context.showOptionDropdown" class="custom-select-project" style="width:50%" #optionSelect (change)="context.option.value">
                <option disabled>Select type</option>
                <option value="option1">option1</option>
                <option value="option2">option2</option>
                <option value="option3">option3</option>
                <option value="option4">option4</option>
            </select>
        </div>
    </div>

    <div style="display: flex; flex-direction: column; margin-bottom: 10px;" *ngIf="!context.hideDescription">
        <label style="font-size: 1.2rem; font-weight: 400;">Description</label>
        <textarea rows="4" [(ngModel)]="context.description" cols="50" maxlength="250" placeholder="Enter text here" style="color: #569bd2; resize: none; font-weight: 400; font-size: 1.2rem;"></textarea>
    </div>
</div>
<div>   
    <button class="btn-main" (click)="confirm(context)" style="width: 15%;">Confirm</button>
</div>

【问题讨论】：

标签： forms angular tags

【解决方案1】：

基于 ngModel 的“验证”

    <input type="text" required name="title" [(ngModel)]="titleModel">
    <span style="color:red" *ngIf="titleModel?.length > 10">
          10 max
    </span>
    <span style="color:red" *ngIf="!titleModel">
          required
    </span>
    <button [disabled]="titleModel?.length > 10 || !titleModel">OK</button>

DEMO

基于本地模板变量的“验证”：

<input type="text" (keyup)='0' #title>
<span style="color:red" *ngIf="title.value.length > 10">
      10 max
</span>
<span style="color:red" *ngIf="!title.value">
      required
</span>

<button [disabled]="title.value.length > 10 || !title.value">OK</button>

DEMO

【讨论】：

好的，我明白了，为 value.length 创建跨度工作正常，但我仍然可以提交...如果我的长度小于 3 个字符，我需要锁定提交。跨度>
我在你的 sn-p 中没有看到任何表单标签
但是没有...这就是问题...如何进行表单验证，但没有表单标签。但是，感谢您，我可以设法隐藏提交按钮，直到用户输入超过 3 个字符:)
如果没有表格怎么提交？你的意思是一个普通按钮上的动作？然后，根据条件隐藏按钮或使用 if-else 在类中检查模型/值长度
对不起...我的错...对问题进行了一些编辑...现在将修复它

【解决方案2】：

您需要使用反应式表单 API 中的 FormControl，它可以与未包装到 <form> 标记中的独立 <input> 一起使用。

Component({
   ...
   template: `<input type="text" [formControl]="name">` 
})
class MyComponent {
  name = new FormControl('',
           [Validators.required, Validators.minLength(3)]);
}

【讨论】：