Javascript 带角材料的形状控制问题

当我想要编辑我的用户时，我会在控制台中显示此消息

我在网上看到了一些解决方案，有些人对此有困难，但我没有解决方案

有人也有同样的问题吗

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:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    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:


    <div [formGroup]="myGroup">
       <input formControlName="firstName">
       <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
    </div>

    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)

EditUserDialogComponent.html:37错误：
ngModel不能用于向父formGroup指令注册表单控件。试用
改为formGroup的合作伙伴指令“formControlName”。例子：
在你们班：
this.myGroup=newformgroup({
名字：newformcontrol（）
});
或者，如果希望避免注册此表单控件，请在ngModelOptions中指出它是独立的：
例子：
位于Function.modelParentException（forms.js:6182）
在NgModel._checkParentType（forms.js:6754）
在NgModel.检查错误（forms.js:6740）
位于NgModel.ngOnChanges（forms.js:6640）
在checkAndUpdateDirectiveInline（core.js:31905）
在checkAndUpdateNodeLine（core.js:44366）
在checkAndUpdateNode（core.js:44305）
在debugCheckAndUpdateNode（core.js:45327）
在debugCheckDirectivesFn（core.js:45270）
在Object.eval[作为updateDirectives]（EditUserDialogComponent.html:42）

这是我的HTML

我认为这是表单控件的问题，但是如果我按照错误消息的说明操作， 我有同样的

<div class="manage-content">
  <div class="title">
    <mat-icon class="user-icon">how_to_reg</mat-icon>
    <h3>Edit a user</h3>
  </div>
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <mat-form-field class="full-width-input">
      <input id="firstName" matInput placeholder="First name" formControlName="f_name" [(ngModel)]="selectedUser.f_name"#f_name>
      <mat-error *ngIf="isFieldInvalid('f_name')">
        The first name you've entered is malformed.
      </mat-error>
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="middleName" matInput placeholder="Middle name" formControlName="m_name" [(ngModel)]="selectedUser.m_name" #m_name>
      <mat-error *ngIf="isFieldInvalid('m_name')">
        The middle name you've entered is malformed.
      </mat-error>
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="lastName" matInput placeholder="Last name" formControlName="l_name" [(ngModel)]="selectedUser.l_name" #l_name>
      <mat-error *ngIf="isFieldInvalid('l_name')">
        The last name you've entered is malformed.
      </mat-error>
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="email" matInput placeholder="Email" formControlName="email" [(ngModel)]="selectedUser.email" #email>
      <mat-error *ngIf="isFieldInvalid('email')">
        The email you've entered is malformed.
      </mat-error>
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <div class="visibility">
        <input id="password" matInput type="password" placeholder="Password" formControlName="password" [(ngModel)]="selectedUser.password">
        <mat-icon *ngIf="isPasswordVisible" (click)=showPassword()>visibility</mat-icon>
        <mat-icon *ngIf="!isPasswordVisible" (click)="showPassword()">visibility_off</mat-icon>
      </div>
      <mat-error *ngIf="isFieldInvalid('password')">
        The password you've entered is malformed.
      </mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-select placeholder="Role" class="full-width-input" [(ngModel)]="selectedUser.role">
        <mat-option value="option">End-User</mat-option>
        <mat-option value="option">View-User</mat-option>
        <mat-option value="option">Vendor</mat-option>
        <mat-option value="option">Tool Guy</mat-option>
      </mat-select>
    </mat-form-field>
    <div class="cta-btn">
      <button mat-raised-button class="createUserBtn" color="primary" type="submit">Update user</button>
      <button mat-raised-button class="createUserBtn" color="warn" type="submit" (click)="click()">Cancel</button>
    </div>
  </form>
</div>

如何注册
编辑用户
您输入的名字格式不正确。
您输入的中间名格式不正确。
您输入的姓氏格式不正确。
您输入的电子邮件格式不正确。
可见度
能见度下降
您输入的密码格式不正确。
最终用户
查看用户
小贩
工具工
更新用户
取消

@组件({
选择器：“应用程序编辑用户对话框”，
templateUrl:“编辑用户对话框.component.html”，
样式URL:['./manage user.component.scss']
})
导出类EditUserDialogComponent{
表格：表格组；
FormSubmitTest：布尔值；
isPasswordVisible=false；
selectedUser：用户；
构造函数（私有formBuilder:formBuilder，私有userService:userService，公共对话框：MatDialog，公共对话框Ref:MatDialogRef，
@注入（MAT_对话框_数据）公共数据：任意）{
this.selectedUser=数据；
console.log（this.selectedUser）；
this.form=this.formBuilder.group({
电子邮件：[''，Validators.compose（[Validators.required，Validators.pattern（'^[a-zA-Z0-9.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$）]，
密码：[''，Validators.compose（[Validators.required，Validators.minLength（10），Validators.maxLength（35）]，
f_名称：[''，Validators.compose（[Validators.required，Validators.maxLength（100）]）]，
m_名称：[''，Validators.compose（[Validators.maxLength（100），Validators.pattern（'[0-9]+'））]，
l_名称：[''，Validators.compose（[Validators.required，Validators.maxLength（100）]）
//客户：[''，Validators.compose（[Validators.required，Validators.minLength（10），Validators.maxLength（35）]，
});
}
单击（）：无效{
this.dialogRef.close（）；
}
showPassword（）{
const pass:HTMLInputElement=document.getElementById（'password'）作为HTMLInputElement；
如果（pass.type==“密码”）{
this.isPasswordVisible=true；
pass.type=“text”；
}否则{
this.isPasswordVisible=false；
pass.type=“password”；
}
}
isFieldInvalid（字段：字符串）{
返回(
（！this.form.get（field.valid&&this.form.get（field.touch））||
（this.form.get（field.untouched&&this.formsubmitattest）
);
}
onSubmit（）{
//if（this.form.valid）{
//this.authService.login（this.form.value）；
// }
this.formsubmittest=true；
}
}

---

非常感谢您的帮助

您遇到的问题是在formGroup中使用（[ngModel]）

如果需要提取值，则必须通过TS组件上的formGroup变量进行提取

查看角度支撑页面上的更多信息：

更改此选项：

    `<input id="password" matInput type="password" placeholder="Password" formControlName="password" [(ngModel)]="selectedUser.password">`

``

为此：

     `<input id="password" matInput type="password" placeholder="Password" formControlName="password"  (change)="selectedUserChanged($event)">`

     //and add to your ts
     `selectedUserChanged(change: any) {
            this.group.get('password').setValue(change.value);
      }`

``
//并添加到您的ts中
`selectedUserChanged（更改：任意）{
this.group.get（'password'）.setValue（change.value）；
}`

您使用的是混合器或

模板驱动表单

和

反应表单

。请不要同时使用这两种形式。如果您使用的是被动形式，您不能在

[formGroup]=“form”

中使用

（[ngModel]）

。您能告诉我怎么做吗？我需要怎么写这个？你能添加组件代码以便我能帮助你吗？我将它添加到我的postjust中以获取密码或所有信息？在你使用ngModel的任何地方。之后，我的表单像一个新表单一样空了。我更改了ts代码，你可以试试这个，希望它能有所帮助

     `<input id="password" matInput type="password" placeholder="Password" formControlName="password"  (change)="selectedUserChanged($event)">`

     //and add to your ts
     `selectedUserChanged(change: any) {
            this.group.get('password').setValue(change.value);
      }`