Angular Material 8 formControlName 错误 - 获取冲突消息

Question

我正在尝试使用Angular Material (8) Reactive Forms。我正在填写注册表。我遇到了似乎相互矛盾的错误。

**

当我这样做时（文件：register.component.html）：

**

  <!-- Form -->
            <form [formGroup]="registerForm" class="text-center" style="color: #757575;">

                <div class="form-col">
                    <div class="col">
                        <!-- First name -->
                        <div class="md-form">
                            <input required type="text" id="materialRegisterFormFirstName" class="form-control" 
                            mdbInput   [(ngModel)]="user.firstname"/>
                            <label for="materialRegisterFormFirstName">First name</label>
                        </div>
                    </div>

[... snip ...]

**

我收到此错误：

**

ERROR Error: 
      ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
      formGroup's partner directive "formControlName" instead.  

所以，我按照说明进行操作。当我使用这种方法时（添加formControlName="firstname"），

            <div class="form-col">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input required type="text" id="materialRegisterFormFirstName" class="form-control" 
                        mdbInput formControlName="firstname"  [(ngModel)]="user.firstname"/>
                        <label for="materialRegisterFormFirstName">First name</label>
                    </div>
                </div>

[...剪辑...]

**

我收到以下错误：

**

forms.js:2312 
    It looks like you're using ngModel on the same form field as formControlName. 
    Support for using the ngModel input property and ngModelChange event with 
    reactive form directives has been deprecated in Angular v6 and will be removed 
    in Angular v7.

    For more information on this, see our API docs here:
    https://angular.io/api/forms/FormControlName#use-with-ngmodel

在查找问题时，我在一个旧线程中遇到了这个问题：

参考：ngModel on the same form field as formControlName

From Angular 7 and onward you can't use both formControlName and ngModel together. If you want to use template-driven forms you can go with ngModel and if you want to use reactive forms you can't go with ngModel. (Simple)

**

听起来好像是说要删除formControlName 引用。如何解决这个问题？

**

TIA

Answer 1

您不能同时使用ngModel and FormControlName 或ngModel and formGroup。因为ngModel 是模板表单驱动，而FormControlName 和FormGroup 是响应式表单驱动。

如果您想同时使用这两种方法，则会增加应用程序的复杂性。如果您想通过 formControlName 访问该值，请像

一样使用它

    <form [formGroup]="registerForm" class="text-center" style="color: #757575;">
      <div class="form-col">
       <div class="col">
        <div class="md-form">
         <input formControlName="firstName" type="text" id="materialRegisterFormFirstName" class="form-control" mdbInput/>
          <label for="materialRegisterFormFirstName">First name</label>
        </div>
       </div>
     </div>
   </form>

在component.ts文件中写成这样

registerForm = new FormGroup({
    firstName: new FormControl([Validator.required]),
});

否则你可以使用formbuilder来构建formgroup，fb是formBuilder的一个实例

this.registerForm = fb.group({
    'fullname': ['', Validators.required],
});

你可以像这样读取值

this.user.firstName = this.registerForm.get('firstName').value;

Answer 2

那是因为您同时使用模板驱动和反应式表单。只能使用其中之一，不能同时使用。

模板驱动表单的语法如下。

.html文件

<div class="row">
  <div class="col-xs-12">
    <form (ngSubmit)="onSubmit()">
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="courseName">Course Name</label>
          <input
            type="text"
            id="courseName"
            class="form-control"
            name="courseName"
            ngModel>
        </div>
        <div class="col-sm-2 form-group">
          <label for="courseDesc">Course Description</label>
          <input
            type="text"
            id="courseDesc"
            class="form-control"
            name="courseDesc"
            ngModel>
        </div>
        <div class="col-sm-2 form-group">
          <label for="courseAmount">Course Amount</label>
          <input
            type="number"
            id="courseAmount"
            class="form-control"
            name="courseAmount"
            ngModel>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <button
            class="btn btn-success"
            type="submit">Add</button>
          <button
            class="btn btn-danger"
            type="button">Delete</button>
          <button class="btn btn-primary" type="button">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

.ts文件

onSubmit(form: NgForm) {
    console.log("Course Name is : " + form.value.courseName);
    console.log("Course Desc is : " + form.value.courseDesc);
    console.log("Course Amount is : " + form.value.courseAmount);    
  }

反应式表单的语法如下

.html 文件。

<div class="row">
  <div class="col-xs-12">
    <form [formGroup]="courseForm" (ngSubmit)="onSubmit()">
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="courseName">Course Name</label>
          <input
            type="text"
            id="courseName"
            class="form-control"
            formControlName="courseName">
        </div>
        <div class="col-sm-2 form-group">
          <label for="courseDesc">Course Description</label>
          <input
            type="text"
            id="courseDesc"
            class="form-control"
            formControlName="courseDesc">
        </div>
        <div class="col-sm-2 form-group">
          <label for="courseAmount">Course Amount</label>
          <input
            type="number"
            id="courseAmount"
            class="form-control"
            formControlName="courseAmount">
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <button
            class="btn btn-success"
            type="submit">Add</button>
          <button
            class="btn btn-danger"
            type="button">Delete</button>
          <button class="btn btn-primary" type="button">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

.ts文件

this.courseForm = new FormGroup({
          'courseName': new FormControl(null, Validators.required),
          'courseDesc': new FormControl([Validators.required, Validators.minLength(100)]),
          'courseAmount': new FormControl(null)
        });

更多参考visit

Answer 3

由于您使用的是响应式表单，因此无需在输入字段中使用ngModel，使用formControlName insted。 ngModel 用于模板驱动的froms

<div class="md-form">
  <input required type="text" id="materialRegisterFormFirstName" class="form-control" 
   mdbInput formControlName="firstname"/>
  <label for="materialRegisterFormFirstName">First name</label>
</div>

在这里你可以找到更好的例子https://v8.angular.io/guide/reactive-forms

Answer 4

在输入元素上使用[ngModelOptions]="{ standalone: true }"