フォーム4を角度4で送信する前の入力フィールドの検証

Question

私の目的は、フォームが送信される前にユーザーが有効なデータ（番号なし）を入力し、入力フィールドを空にしないことです。助けて！！！

TSファイルのコードは次のように：

import { Routes, RouterModule, Router, ActivatedRoute } from "@angular/router"; 
import { Component, NgModule, Input, Output, EventEmitter } from '@angular/core'; 
import { Environments } from './Environment-class'; 
import { FormBuilder, FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms'; 

@Component({ 
selector: 'addenvironment-form', 
templateUrl: './add-environment-form.component.html' 
    }) 
export class AddEnvironmentComponent { 

@Output() EnvironementCreated = new EventEmitter<Environments>(); 
createNewEnv(EnvironmentNames: string) { 
    this.EnvironementCreated.emit(new Environments(EnvironmentNames)); 
} 

}

そして、それが持っているので、あなたが入力にrequiredタグを追加提出することができます

<br /> 
<div class="card"> 
<h4 class="card-header">Add a New Environment</h4> 
<div class="card-body mx-auto "> 
    <form class="form-inline "> 
     <div class="form-group "> 

      <h5 class="form-control-static">Enter New Name: </h5> 
     </div> 

     <div class="form-group mx-lg-3 text-center"> 
      <label for="inputPassword2" class="sr-only">Password</label> 
      <input type="text" class="form-control " id="inputPassword4" placeholder=" Name " #EnvironmentNames> 
     </div> 

     <button type="submit" class="btn btn-primary" (click)="createNewEnv(EnvironmentNames.value)">Submit</button> 
    </form> 
</div> 

Answer 1

HTMLファイルを記入してください。 さらに、minlength。 文字のみにするには、patternを使用します。あなたは、ユーザーが入力を許可する文字をプレイすることができます。パスワードのために、この入力を使用しようとしている場合は

、私はあなたが変更することをお勧めtype

type="password"にあなたのフォームが有効でないにもdisableボタン場合はすることができます。

<form [formGroup]="myForm" class="form-inline "> 
    <div class="form-group "> 
     <h5 class="form-control-static">Enter New Name: </h5> 
    </div> 
    <div class="form-group mx-lg-3 text-center"> 
     <label for="inputPassword2" class="sr-only">Password</label> 
     <input type="password" class="form-control " id="inputPassword4" 
     placeholder=" Name " #EnvironmentNames pattern="^[a-zA-Z]+$" 
     minlength="8" required> 
    </div> 

    <button type="submit" class="btn btn-primary" 
    (click)="createNewEnv(EnvironmentNames.value)" 
    [disabled]="!myForm.valid">Submit 
    </button> 
</form> 

：すべてこれはあなたのフォームは怒鳴るようになるはずです、上記で