Components: FormArray add triggers mat-form-field-invalid

[DislayPS]

Bug, feature request, or proposal:

When I have a form and I add a FormControl, fields that are required and untouched become red.

What is the expected behavior?

It should not become red as we haven't touched these fields yet.

What is the current behavior?

It adds the class mat-form-field-invalid resulting in red text without triggering a proper validation.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-y6f4xv?file=src%2Fapp%2Fprofile-editor%2Fprofile-editor.component.html
Go to the page, add an Alias (new FormControl in the FormArray) without touching anything else. The firstNameMaterial field becomes red because the mat-form-field adds a “mat-form-field-invalid” class.

What is the use-case or motivation for changing an existing behavior?

Annoying form bug

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.2 / Material 6.4.5

Is there anything else we should know?

Note: This is a stripped down version of the official Angular documentation on reactive forms: https://angular.io/guide/reactive-forms

[crisbeto]

That happens because the button that is adding the alias is submitting the form at the same time. You should add type="button" if you don't want it to submit.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}