2

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

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

4

4 回答 4

3

尝试readonly代替disabled.

于 2020-08-10T11:28:50.953 回答
0

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

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

于 2019-05-24T23:34:09.687 回答
0

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

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

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

于 2022-02-09T13:52:21.603 回答
0

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

于 2020-10-17T20:37:27.640 回答