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 在與 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

那是因為您同時使用模板驅動和反應式表單。 您需要使用其中之一，不能同時使用。

模板驅動表單的語法如下。

.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)
        });

更多參考訪問

Answer 2

您不能同時使用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 3

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

Answer 4

因為使用的是活性形式，無需使用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