入力時にフォームタグのないフォーム検証 - 角度2

Question

名前の入力要素にフォーム検証を挿入するポップアップコンポーネントがあります（必須フィールドと最小長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.showScriptDropdown" class="custom-select-project" style="width:50%" #scriptSelect (change)="context.script=scriptSelect.value"> 
       <option disabled>Select type</option> 
       <option value="js">javascript</option> 
       <option value="lua">lua</option> 
       <option value="py">python</option> 
       <option value="gy">groovy</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> 

Answer 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

Answer 2

あなたは<form>タグに包まれていないスタンドアロン<input>で使用することができる反応性フォームのAPIからFormControlを使用する必要があります。

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