Javascript 在4中提交表单之前输入字段验证

我的目标是确保用户在提交表单之前输入有效数据（无数字），并且输入字段不应为空。救命啊

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));
}

从“@angular/Router”导入{Routes，RouterModule，Router，ActivatedRoute}；
从“@angular/core”导入{Component，NgModule，Input，Output，EventEmitter}；
从“./Environment class”导入{Environments}；
从“@angular/forms”导入{FormBuilder、FormsModule、ReactiveFormsModule、FormGroup、FormControl、Validators}；
@组成部分({
选择器：'addenvironment form'，
templateUrl:“./add environment form.component.html”
})
导出类AddenEnvironment组件{
@Output（）environmentcreated=neweventemitter（）；
createNewEnv（环境名称：字符串）{
this.environmentcreated.emit（新环境（EnvironmentNames））；
}

}

和HTML文件

<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>

添加新环境
输入新名称：
密码
提交

---

您可以将

必需的

标记添加到输入字段中，以便必须填写它。 此外，您还可以添加

minlength

。 要使其仅为字母，您可以使用

模式

。你可以玩你想让用户输入的字符

如果您要使用此输入作为密码，我建议您将

类型更改为
type=“password”

如果表单无效，您还可以禁用

按钮

上面提到了所有这些，您的表单应该类似于下面的内容：

<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>

输入新名称：
密码
提交