Question

我现在出现一个显示输入无效的文本，但是我想将边框设为红色而不是显示此文本，因为它看起来很草率。我想知道如何才能做到这一点，似乎无法在线找到合适的解决方案。

这是当前的代码：

 <input placeholder="Vraag" formControlName="actualQuestion" type="text" class="form-control">
                        <div class="text-danger" *ngIf="isSubmitted && formControls.actualQuestion.errors?.required"> This field is required. </div>
                        <input placeholder="Optie 1" formControlName="option1" type="text" class="form-control">
                        <div class="text-danger" *ngIf="isSubmitted && formControls.option1.errors?.required"> This field is required. </div>
                        <input placeholder="Optie 2" formControlName="option2" type="text" class="form-control">
                        <div class="text-danger" *ngIf="isSubmitted && formControls.option2.errors?.required"> This field is required. </div>

我上传了一个在“ Optie 1”周围画有边框的图像，以阐明我的意思。

Answer 1

Angular将许多控件属性作为CSS classes附加到表单控件元素上。

因此，您可以使用.ng-valid和.ng-invalid类来设置每个表单控件边框的颜色。

.ng-invalid:not(form)  {
  border: 2px solid red /* red */
}

Example

Answer 2

您可以通过以下方式获取错误状态：

通过设置错误状态的样式，您可以设置一个ngClass，它使用一个表达式来设置类：

formControls.controls.option1.isValid

将此布尔值应用于选择器：

<input [ngClass]="{'input-error': formControls.controls.option1.isValid} placeholder="Optie 1" formControlName="option1" type="text" class="form-control">

然后，您可以在.scss / .css中将样式应用于类.input-error，例如：

.input-error {
    border: red 1px solid;
}

Answer 3

验证失败时，您可以添加.invalid类。

.invalid {
   border: 1px solid red;
 }
<input placeholder="Vraag" formControlName="actualQuestion" type="text" class="form-control" [class.invalid]="isSubmitted && formControls.actualQuestion.errors?.required">

Answer 4

<div class="form-group" [ngClass]="
                                            formFieldCss(
                                                form_Need,
                                                formSubmitAttempt,
                                                'zipcode'
                                            )
                                        ">
                                        <label>Zip Code
                                            <i class="text-danger" *ngIf="!isViewFlag">*</i></label>
                                        <input type="text" class="form-control" name="zipcode" formControlName="zipcode" numbersOnly
                                            maxlength="5" />
                                        <span *ngIf="
                                                form_Need.get('zipcode').hasError('required') &&
                                                form_Need.get('zipcode').touched
                                            " class="help-block">This field is required</span>
                                        <span *ngIf="
                                                form_Need.get('zipcode').hasError('whitespace') &&
                                                !form_Need.get('zipcode').hasError('required') &&
                                                form_Need.get('zipcode').touched
                                            " class="help-block">This field is required</span>
                                    </div>

调用此功能

formFieldCss(form, formSubmitAttempt, field: string) {
    return {
        'has-error': this.formFieldValid(form, formSubmitAttempt, field),
        'has-feedback': this.formFieldValid(form, formSubmitAttempt, field)
    }
}


formFieldValid(form, formSubmitAttempt, field: string) {

    return (
        (!form.get(field).valid && form.get(field).touched) ||
        (form.get(field).untouched && formSubmitAttempt)
    )
}

formValid(form) {
    return form.invalid;
}

Answer 5

一种选择是使用有角度的ng-style或ng-class指令，在该位置可以使用验证。如果为真（您有错误），则边框颜色将设置为红色，否则设置为灰色或不设置或其他：d

[ngStyle]="{'border-color': form.hasError['required'] ? 'red' : 'grey'}"

类似的东西可能起作用

Answer 6

您也可以只在css文件中添加以下指针：

input.ng-invalid.ng-touched {
    border: red 1px solid;
}

Answer 7

它可以通过使用 ngClass 指令来完成，如下所示：

<input type="email" class="input" [ngClass]="{'red-border-class': submitted && formControl.email.errors}" id="inputEmail" formControlName="email" placeholder="Enter Email">


.red-border-class { border: red 1px solid;}

想要在输入无效时将边框颜色变为红色

7 个答案: