Question

我只是想在用户名空白或不具有要求的模式时显示一个叉号，如果输入的输入有效，则显示一个勾号.Bootstrap是活动的，是非活动的类对此提供了帮助。下面是我尝试过的代码。我只得到用户名未定义。我似乎在实现上出错了。您能帮忙纠正一下吗？

<form  [formGroup]="profileForm" (ngSubmit)="onSubmit()">

                <input
                  type="text"
                  placeholder="Username / Email"
                  class="form-control"
                  formControlName="username"
                  [ngClass]="username.errors?'is-invalid':'is-valid'"
                  name="username"
                  id="username"
                />
    </form>

在ts

 profileForm = new FormGroup({
    username: new FormControl('',[Validators.required,Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")])
  });

Answer 1

.ts中添加

cmake_minimum_required(VERSION 3.13)
project(name)

set(CMAKE_CXX_STANDARD 14)

add_executable(name main.cpp)

INCLUDE(FindPkgConfig)
PKG_SEARCH_MODULE(gvc REQUIRED libgvc libcgraph libcdt)
LINK_DIRECTORIES(${gvc_LIBRARY_DIRS})
INCLUDE_DIRECTORIES(${gvc_INCLUDE_DIRS})
TARGET_LINK_LIBRARIES(${PROJECT_NAME} ${gvc_LIBRARIES})

在html中添加

get userName() {
 return this.profileForm.get('userName');
}

如果您不想在.ts文件中添加任何代码，请使用

[ngClass]="userName.hasError('pattern')" ? "is-invalid": "is-valid"

Answer 2

您的组件中确实没有username属性。所以是的，username是未定义的。

我们知道的唯一属性是profileForm。您可以使用profileForm.get('username')获得名为用户名的控件，也可以使用profileForm.get('username').valid测试该控件是否有效。

反应性表单验证-Angular＆Bootstrap

2 个答案: