angular - 如何使 Angular Reactive Form 也需要禁用输入？

Question

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

我尝试在输入中添加“required”指令，还尝试在创建表单时添加 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 即使输入中没有任何内容也是有效的

Answer 1

尝试使用 readonly 而不是 disabled。