Angular Form show errors when pristine

Question

Consider an Angular Form inside a component with a fully managed errors and controls. This form is used to add and edit* certain values in a particular scenario.

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

Note that edit operation is undertaken the data has already present in the database.

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;

  });
}

Problem: During edit operation the form is prefilled by data binding. Now consider that some of the fields are now invalid, they do not get the red highlight since the form is still untouched.

Requirement: I want that as soon as the existing data gets placed in the form, the invalid field should be highlighted.

Using Angular 7 and Material CDK

It's hard to determine what the problem is when you don't show us the code. — The Head Rush, May 11 '19 at 14:41

Kais Ben Daamech · Answer 1 · 2019-05-11T14:45:56.533

0

Maybe you could activate the dirty state of the input pro grammatically if it's in editMode. To set the form inputs as dirty you could use control.markAsDirty(); as stated in : 37844092

edited May 11 '19 at 14:45

answered May 11 '19 at 14:34

Kais Ben Daamech

112
8

What if its a template driven form? – Abhijit Srivastava May 11 '19 at 15:01
In that case, you could use jQuery to do so, just set dirty as true using : jQuery('selector').data("dirty", true); or you could try triggering a change, using: jQuery('input selector')..change(); – Kais Ben Daamech May 11 '19 at 23:31

Angular Form show errors when pristine

1 Answers1