title: Form control problem with angular Material
body: <p>I have this message appear in my console when I want edit my user.</p>
  
  <p>I see some solution on the web, Some people have trouble with it but no solution for me.</p>
  
  <p>Does someone have the same problem ?</p>
  
  <pre><code>EditUserDialogComponent.html:37 ERROR Error: 
        ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
        formGroup's partner directive "formControlName" instead.  Example:
  
  
      &lt;div [formGroup]="myGroup"&gt;
        &lt;input formControlName="firstName"&gt;
      &lt;/div&gt;
  
      In your class:
  
      this.myGroup = new FormGroup({
         firstName: new FormControl()
      });
  
        Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:
  
        Example:
  
  
      &lt;div [formGroup]="myGroup"&gt;
         &lt;input formControlName="firstName"&gt;
         &lt;input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}"&gt;
      &lt;/div&gt;
  
      at Function.modelParentException (forms.js:6182)
      at NgModel._checkParentType (forms.js:6754)
      at NgModel._checkForErrors (forms.js:6740)
      at NgModel.ngOnChanges (forms.js:6640)
      at checkAndUpdateDirectiveInline (core.js:31905)
      at checkAndUpdateNodeInline (core.js:44366)
      at checkAndUpdateNode (core.js:44305)
      at debugCheckAndUpdateNode (core.js:45327)
      at debugCheckDirectivesFn (core.js:45270)
      at Object.eval [as updateDirectives] (EditUserDialogComponent.html:42)
  </code></pre>
  
  <p>and this is my HTML,</p>
  
  <p>I think it's a problem about the form control, but if I follow the instructions of the error message, 
  I have the same...</p>
  
  <pre><code>&lt;div class="manage-content"&gt;
    &lt;div class="title"&gt;
      &lt;mat-icon class="user-icon"&gt;how_to_reg&lt;/mat-icon&gt;
      &lt;h3&gt;Edit a user&lt;/h3&gt;
    &lt;/div&gt;
    &lt;form [formGroup]="form" (ngSubmit)="onSubmit()"&gt;
      &lt;mat-form-field class="full-width-input"&gt;
        &lt;input id="firstName" matInput placeholder="First name" formControlName="f_name" [(ngModel)]="selectedUser.f_name"#f_name&gt;
        &lt;mat-error *ngIf="isFieldInvalid('f_name')"&gt;
          The first name you've entered is malformed.
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field class="full-width-input"&gt;
        &lt;input id="middleName" matInput placeholder="Middle name" formControlName="m_name" [(ngModel)]="selectedUser.m_name" #m_name&gt;
        &lt;mat-error *ngIf="isFieldInvalid('m_name')"&gt;
          The middle name you've entered is malformed.
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field class="full-width-input"&gt;
        &lt;input id="lastName" matInput placeholder="Last name" formControlName="l_name" [(ngModel)]="selectedUser.l_name" #l_name&gt;
        &lt;mat-error *ngIf="isFieldInvalid('l_name')"&gt;
          The last name you've entered is malformed.
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field class="full-width-input"&gt;
        &lt;input id="email" matInput placeholder="Email" formControlName="email" [(ngModel)]="selectedUser.email" #email&gt;
        &lt;mat-error *ngIf="isFieldInvalid('email')"&gt;
          The email you've entered is malformed.
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field class="full-width-input"&gt;
        &lt;div class="visibility"&gt;
          &lt;input id="password" matInput type="password" placeholder="Password" formControlName="password" [(ngModel)]="selectedUser.password"&gt;
          &lt;mat-icon *ngIf="isPasswordVisible" (click)=showPassword()&gt;visibility&lt;/mat-icon&gt;
          &lt;mat-icon *ngIf="!isPasswordVisible" (click)="showPassword()"&gt;visibility_off&lt;/mat-icon&gt;
        &lt;/div&gt;
        &lt;mat-error *ngIf="isFieldInvalid('password')"&gt;
          The password you've entered is malformed.
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field&gt;
        &lt;mat-select placeholder="Role" class="full-width-input" [(ngModel)]="selectedUser.role"&gt;
          &lt;mat-option value="option"&gt;End-User&lt;/mat-option&gt;
          &lt;mat-option value="option"&gt;View-User&lt;/mat-option&gt;
          &lt;mat-option value="option"&gt;Vendor&lt;/mat-option&gt;
          &lt;mat-option value="option"&gt;Tool Guy&lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
      &lt;div class="cta-btn"&gt;
        &lt;button mat-raised-button class="createUserBtn" color="primary" type="submit"&gt;Update user&lt;/button&gt;
        &lt;button mat-raised-button class="createUserBtn" color="warn" type="submit" (click)="click()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <pre><code>@Component({
    selector: 'app-edit-user-dialog',
    templateUrl: 'edit-user-dialog.component.html',
    styleUrls: ['./manage-user.component.scss']
  })
  export class EditUserDialogComponent {
    form: FormGroup;
    formSubmitAttempt: boolean;
    isPasswordVisible = false;
    selectedUser: User;
  
    constructor(private formBuilder: FormBuilder, private userService: UserService, public dialog: MatDialog, public dialogRef: MatDialogRef&lt;EditUserDialogComponent&gt;,
                @Inject(MAT_DIALOG_DATA) public data: any) {
      this.selectedUser = data;
      console.log(this.selectedUser);
      this.form = this.formBuilder.group({
        email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$')])],
        password: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(35)])],
        f_name: ['', Validators.compose([Validators.required, Validators.maxLength(100)])],
        m_name: ['', Validators.compose([Validators.maxLength(100), Validators.pattern('[0-9]+')])],
        l_name: ['', Validators.compose([Validators.required, Validators.maxLength(100)])]
        // client: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(35)])],
      });
    }
  
    click(): void {
      this.dialogRef.close();
    }
  
    showPassword() {
      const pass: HTMLInputElement = document.getElementById('password') as HTMLInputElement;
      if (pass.type === "password") {
        this.isPasswordVisible = true;
        pass.type = "text";
      } else {
        this.isPasswordVisible = false;
        pass.type = "password";
      }
    }
  
    isFieldInvalid(field: string) {
      return (
        (!this.form.get(field).valid &amp;&amp; this.form.get(field).touched) ||
        (this.form.get(field).untouched &amp;&amp; this.formSubmitAttempt)
      );
    }
  
    onSubmit() {
      // if (this.form.valid) {
      //   this.authService.login(this.form.value);
      // }
      this.formSubmitAttempt = true;
    }
  
  }
  </code></pre>
  
  <p>thanks a lot for your help</p>