Angular Ошибка формы 8 MaterialControlName - получение конфликтующих сообщений

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>

[... snip ...]

**

Я получаю следующую ошибку:

**

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 file

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 file.

<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, fb это экземпляр formBuilder

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

, и вы можете прочитать значение, как это

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

Answer 3

, так как вы используете реактивные формы, нет необходимости использовать ngModel в полях ввода используйте formControlName insted. ngModel используется в шаблонах из

<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 }" на элементе ввода