Question

请考虑在组件内部具有完全托管的错误和控件的Angular Form。该表格用于在特定情况下添加和编辑*某些值。

<form #addConfigurationFormRef="ngForm"
              (ngSubmit)="onFormSubmit(addConfigurationFormRef)">
          <mat-form-field>
            <input matInput
                   ngModel
                   [(ngModel)]="configuration.signatory"
                   name="signatory"
                   placeholder="Certificate Signatory"
                   autocomplete="off"
                   required
                   maxlength="100"
                   minlength="3" />
          </mat-form-field>
         <mat-card-actions
            <button mat-raised-button
                    color="accent"
                    [disabled]="addConfigurationFormRef.invalid || pageSubmit">
              {{ formActionButtonLabel }}
            </button>
        </mat-card-actions>
</form>

请注意，将对数据库中已经存在的数据进行编辑操作。

public formActionButtonLabel: string = "Add Configurations";
public isEditComponent: Boolean = false;
public onFormSubmit(form: NgForm): void{ //logic };
public configuration: CfConfiguration = {};

ngOnInit() {
  this.fetchCommonDataService.data$.subscribe(data =>{
    if(data) this.isEditComponent = true; 
    if(data) this.configuration = data;

  });
}

问题：：在编辑操作期间，表单通过数据绑定预先填写。现在考虑某些字段现在无效，由于表单仍未更改，它们没有显示红色突出显示。

要求：我希望在将现有数据放入表单后，立即突出显示无效字段。

使用 Angular 7 和材料CDK

Answer 1

如果处于editMode模式，也许可以以编程方式激活输入的脏状态。要将表单输入设置为脏输入，可以使用37844092

中所述的control.markAsDirty();

原始时的角度形式显示错误

1 个答案: