如何使用验证程序的改变边界的颜色formcontrolname在角

Question 1

我有一个formcontrol我想要改变颜色，当场是无效的，我已经尝试了下面为大多数例子做同样的:

 <input 
        formControlName="personNameField"
        type="text"
        placeholder="Bitte eingeben"
        [ngClass]="{'error': personNameField.errors}"
        ></input>

我ts formcontrol产生这样的：

    form = this.builder.group({
    personNameField: new FormControl('',
      [Validators.required]),
  });

  getName(){
    this.form.get('personNameField')
  }

但是我得到的以下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'errors')

任何想法什么我做错了什么？

更新：我加入吸气和删除的问题，但仍然接壤的工作不仅错误的信息。

UPdate2:

.error {
    // underline input field on error
    border: 1px solid red;
    display: block;
    color: red;
}

我想要什么

我得到什么

Question 2

试试这个。

[ngClass]="{'error': form.get('personNameField')?.errors}"

Question 3

如此简单的验证输入使用引导班：第一，在你HTML文件，我们有：

        <div class="form-group">
        <label for="title">title</label>
        <input id="title" type="text" formControlName="title" class="form- 
       control" [ngClass]="{'is-invalid': isCategorySubmitted && 
        categoryFormInfo.title.errors}" />
        </div>

所以在你的ts文件：

isCategorySubmitted = false;

initFormBuilder() {
this.categoryForm = this.formBuilder.group({
  title: ['', Validators.required]
});

}

  get categoryFormInfo() {
return this.categoryForm.controls;

}

  submit() {
this.isCategorySubmitted = true;
if (this.categoryForm.invalid) {
  return;
}

  // do your code after the submit

}

由此，可以验证的输入，这样简单。

N.F. · Answer 1 · 2021-11-24T06:51:12

-1

试试这个。

[ngClass]="{'error': form.get('personNameField')?.errors}"

N.F.

2021-11-24 06:51:12

嘿谢谢这给我带来了一步，但现在只有一个大型的矩形围着标签和投入。我只是想改变边界的颜色你有一个想法就如何改变我的院? 我更新我的代码

natyus

对不起我不明白什么你想做的。请出示有一个图像。

N.F.

我没有加入图片

natyus

你html在此后没有一个标签。请更新你的岗位，使其包括所有部分"是什么我搞定"。

N.F.

Seyed-Amir-Mehrizi · Answer 2 · 2021-11-24T07:22:10

如此简单的验证输入使用引导班：第一，在你HTML文件，我们有：

        <div class="form-group">
        <label for="title">title</label>
        <input id="title" type="text" formControlName="title" class="form- 
       control" [ngClass]="{'is-invalid': isCategorySubmitted && 
        categoryFormInfo.title.errors}" />
        </div>

所以在你的ts文件：

isCategorySubmitted = false;

initFormBuilder() {
this.categoryForm = this.formBuilder.group({
  title: ['', Validators.required]
});

}

  get categoryFormInfo() {
return this.categoryForm.controls;

}

  submit() {
this.isCategorySubmitted = true;
if (this.categoryForm.invalid) {
  return;
}

  // do your code after the submit

}

由此，可以验证的输入，这样简单。

如何使用验证程序的改变边界的颜色formcontrolname在角

的问题

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别