如何使用 Angular Reactive Form 也需要禁用输入？答案

【问题标题】：How to make a Disabled Input also Required with Angular Reactive Form?如何使用 Angular Reactive Form 也需要禁用输入？
【发布时间】：2019-05-22 12:53:08
【问题描述】：

我有一个输入，当用户单击对话框时将填充该输入。所以为此我不得不禁用它，因为我不希望用户手动输入值。唯一的问题是这个输入必须是必需的，而我目前无法做到。

我尝试在输入中添加“必需”指令，并尝试在创建表单时添加 Validator.required，但这些都没有使表单成为必需的字段。

createUnityForm(): FormGroup {
    return this._formBuilder.group({
        id      : [this.unity.id],
        description: [this.unity.description],
        floor: [{value: this.unity.floor, disabled: true}, Validators.required]
    });
}

<mat-form-field appearance="outline" floatLabel="always" class="mr-16" fxFlex>
    <mat-label>{{'UNITY.FLOOR' | translate}}</mat-label>
    <input matInput placeholder="{{'UNITY.SELECT-FLOOR' | translate}}"
        name="floor"
        formControlName="floor"
        required>
</mat-form-field>

<button *ngIf="action === 'edit'"
    mat-button
    class="save-button"
    (click)="matDialogRef.close(['save',unityForm])"
    [disabled]="unityForm.invalid"
    aria-label="save">
        {{'GENERAL.SAVE' | translate}}
</button>

即使输入中没有任何内容，unityForm 也是有效的

【问题讨论】：

当我尝试在输入中添加 [disabled] = true 时，控制台中会显示角度：看起来您正在使用带有响应式表单指令的 disabled 属性。如果在组件类中设置此控件时将 disabled 设置为 true，则 disabled 属性实际上会在 DOM 中为您设置。我们建议使用这种方法来避免“检查后更改”错误。示例：form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), });这正是我编码的。不工作
可能this.unity.floor 开头包含一个值。如果它有值，那么验证可能会通过
它没有.. 尝试使用 floor: [{value: null, disabled: true}, Validators.required] 以及问题仍然存在。

标签： angular angular-reactive-forms angular-forms angular-validator

【解决方案1】：

试试readonly 而不是disabled。

【讨论】：

【解决方案2】：

如果您将FormControl 设置为disabled，其验证器将被忽略。

【讨论】：

这不对，不能使用 disabled 属性动态设置 formControl，它是只读的！您可能需要验证规则，然后使用只读属性禁用它stackoverflow.com/questions/54533202/…

【解决方案3】：

拉多斯瓦夫有。尝试在 HTML 中只读，而不是在模型中禁用。这提供了与禁用模型中的控件类似的 UI，但验证仍然有效。这可能很有用（例如从其他地方提取记录以提交到另一个数据库，不允许任何用户更改，但只有在原始数据有效时才提交）

【讨论】：

【解决方案4】：

您不能，响应式表单不会在禁用字段上使用验证器。我认为这样做是个好方法：

-HTML

<input
type="text"
formControlName="controlName"
[ngClass]="{ 'is-invalid': 
(c.controlName.errors || c.controlName.disabled) 
&& submited }"/>

-TypeScript

submited = false;

form: FormGroup = this.formBuilder.group({
    controlName: [{ value: '', disabled: true }, Validators.required]
});

get c(): { [key: string]: AbstractControl } {
    return this.form.controls;
}

save(): void {
    this.submited = true;    
    if (this.form.invalid
       || this.formControl.controlname.value === '') {
     return;
}

-CSS

.is-invalid {
  border: 1px solid #dc3545;
}

当您点击保存按钮时，如果没有值，必填字段将带有红色边框

【讨论】：