如何使用 Angular 响应式表单也需要禁用输入？

Question

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

我尝试在输入中添加 'required' 指令，还尝试在创建表单时添加 Validator.required，但是其中 none 使得该字段成为表单的必需字段。

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 也有效

Answer 1

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

更多信息：https://angular.io/api/forms/AbstractControl#disabled

Answer 2

尝试 readonly 而不是 disabled。

Answer 3

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

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

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

Answer 5

当它设置禁用属性时，验证器将被忽略。

Disabled controls are exempt from validation checks and are not included in the aggregate value of their ancestor controls.

参见：https://angular.io/api/forms/AbstractControl#disabled

如果你想禁用它或考虑验证，你必须让它readonly。

this._formBuilder.group({
    ...
    name: ['Your value here', Validators.required]
});

<input formControlName="name" readonly/>

如何使用 Angular 响应式表单也需要禁用输入？

How to make a Disabled Input also Required with Angular Reactive Form?

angular

angular-reactive-forms

angular-forms

angular-validator