Agfdhyk

I'm trying to deal with a big form creating a custom component for each section placing all the logic and custom validation in each custom component. Basically, each section is sub-form and each one contributes to the validation process of the big form.

I'm also using Angular Material and my custom components are custom form field control implementing the MatFormField<T> interface, in this way, I'll be able to use a nice look to show error and hint of a component as a whole.

For this reason, I'm wrapping my custom component inside <mat-form-field> and even the fields of the sub-form inside the custom component template are wrapped in a <mat-form-field>.

But I have a problem with this solution and Angular Material.
When a field in a sub-form is not valid, <mat-error> for the custom component is correctly displayed and even the <mat-error> for the inner form field is displayed.
The problem is also all the other fields is turning red like if they are invalid, but they're not actually!

Here it is an example:
https://stackblitz.com/edit/angular-2h2fql?embed=1&file=src/app/app.component.ts

each field is required, just try to clear one of them or add a new row and even all the other fields will turn in red.

I think It's just CSS stuff because when <mat-form-field> is invalid, the <mat-error> message class is showed up and a mat-form-field-invalid class is applied to host element <mat-form-field> which turn in red the invalid field.

My question is: do someone knows if it's possible to show up the <mat-error> manually or to set the custom form control in error state without applying the class .mat-form-field-invalid to the host element?

From my understanding, that class is bound to the error state as you can see here

https://github.com/angular/material2/blob/master/src/lib/form-field/form-field.ts#L120

but I can't find an elegant solution to overcome this problem.

I've tried to apply the ShadowDOM view encapsulation but it's not working fine.

I could simply not place my custom form control inside a <mat-form-field>, and it will work fine and the <mat-error> would be showed up, but not in a material design way.

Am I getting wrong or it's some Angular Material problem?

hope my explanation it's clear
thanks

I think you may be confused on the intended purpose of mat-form-field... it is important to note the singularity, mat-form-field versus mat-form-fields

In this document, "form field" refers to the wrapper component
<mat-form-field> and "form field control" refers to the component that
the <mat-form-field> is wrapping (e.g. the input, textarea, select,
etc.)

https://material.angular.io/components/form-field/overview

Although that description is open for interpretation... the design of the form field wrapper was intended to be a 1:1... meaning 1 wrapper, 1 control.

• reviewing all of the stackblitz examples for form-field you will see
  this 1:1 standard.

https://material.angular.io/components/form-field/examples

By wrapping several mat-form-fields in a parent mat-form-field you are essentially turning them all into one big mat-form-field that is treating all controls as one control in terms of styling on errorState... if one is invalid, they all are invalid as it is one giant form-field.

Apply the following form-field wrapper in your people-list.component.html and you will see that the problem is replicated in your OUTSIDE MAT FORM FIELD example.

<div [formGroup]="form">

  <mat-form-field>

    <div formArrayName="rows" *ngFor="let p of rows.controls; let i=index">

        <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="space-around center">



            <mat-form-field hintLabel="row number {{ i }}" class="full-width">

                <input matInput type="text" formControlName="name"/>

                <mat-hint align="end">Valid: {{ p.get('name').valid }}</mat-hint>

                <mat-error *ngIf="p.get('name').hasError('required')">required</mat-error>

            </mat-form-field>



            <mat-form-field class="full-width">

                <mat-select placeholder="Select state" formControlName="state">

                    <mat-option *ngFor="let state of stateList" [value]="state.abbreviation">

                        {{state.name}}

                    </mat-option>

                </mat-select>

                <mat-hint align="end">Valid: {{ p.get('state').valid }}</mat-hint>

                <mat-error *ngIf="p.get('state').hasError('required')">required</mat-error>

            </mat-form-field>



            <button class="glyphicon glyphicon-remove pull-right" *ngIf="rows.length > 0"

                  (click)="removeStep(i)">Remove</button>

            <br>

        </div>

    </div>

    <br>

    <button [disabled]="!rows.valid"

            (click)="addStep()"

            type="button"

            color="primary"

            *ngIf="rows.length < maxlength">

        <span translate>ADD</span>

    </button>

    </mat-form-field>

</div>

You may want to explore replicating the form-field styling on error using something like below.

create mat-form-field-underline class in app.component.scss

.matFormFieldUnderline{

  bottom: 1.25em;

  background-color: rgba(0,0,0,.42);

  height: 1px;

  margin-top:5px;

}

Then use it in your HTML and replicate the mat-form-field style

<h2>OUTSIDE MAT FORM FIELD</h2>

            <app-state-selector

                        name="people2"

                        [ngModel]="peopleList2"

                        #peopleRef2="ngModel"

                        required

                        maxlength=5

                ></app-state-selector>

                <div class="matFormFieldUnderline" [style.background-color]="peopleRef2.errors ? 'red' : null"></div>

                <div fxLayout>

                  <div fxFlex="70">

                   <mat-hint *ngIf="!peopleRef2.errors?.rows">Valid component: {{ peopleRef2.valid }}</mat-hint>

                   <mat-error *ngIf="peopleRef2.errors?.rows">Valid component: {{ peopleRef2.valid }}</mat-error>

                  </div>

                  <div fxFlex="30" fxLayoutAlign="end"> 

                    <mat-hint>{{peopleRef2.value?.length || 0}} rows</mat-hint>

                  </div>

                </div>  

                <mat-error *ngIf="peopleRef2.errors?.required">required</mat-error>

                <mat-error *ngIf="peopleRef2.errors?.maxlength">max 5 rows</mat-error>