Ошибка «Нет доступа к значению для управления формой с именем» с ionic 5 и Angular 9 с использованием реактивной формы

Я работаю с ionic 5 и Angular 9. Я пытаюсь создать реактивную форму, но получаю сообщение об ошибке «Нет доступа к значению для управления формой с именем:« фамилия »».

Вот мой код:

export class ModalComponent implements OnInit {

  public form: FormGroup;

  constructor(private modalController: ModalController,
              private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.initForm();
  }

  public close(): void {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data
    this.modalController.dismiss({
      'dismissed': true
    });
  }

  public initForm(): void {
    this.form = this.formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required]
    });
  }

  logForm(){
    console.log(this.form.value)
  }
}

<form [formGroup]="form" (ngSubmit)="logForm()" novalidate>
    <ion-item>
      <ion-label>Last name</ion-label>
      <ion-input type="text" formControlName="lastname"></ion-input>
    </ion-item>
</form>

Редактировать: я только что нашел проблему. Мне не хватало импорта IonicModule в моем модуле.


ionic-framework angular ionic5 angular9 reactive-forms
person Alyaura    schedule 23.03.2020    source источник
comment
Отвечает ли это на ваш вопрос? Angular4 — средство доступа без значения для управления формой   -  person Michael D    schedule 23.03.2020
comment
Попробуйте добавить *ngIf=form в тег ‹form›. Вы не инициализируете свою форму до ngOnInit, где шаблон уже существует до этого. Следовательно, ваше formControlName=lastname выдает ошибку, потому что ваша форма еще не существует. Другие варианты включают инициализацию в конструкторе или просто в свойстве: public form: FormGroup = this.formBuilder.group({ firstname: ['', Validators.required], lastname: ['', Validators.required] }); }   -  person Jeff Gilliland    schedule 23.03.2020
comment
Второй вариант — перенести инициализацию формы в конструктор. В любом случае, @JeffGilliland прав.   -  person Philipp Meissner    schedule 23.03.2020
comment
Я пробовал оба варианта, но это не сработало. Я попытался создать еще одну форму в своем компоненте страницы, и она отлично сработала. Может быть, это потому, что я пытаюсь создать форму в модальном компоненте. Мой модальный компонент вызывается с использованием: public async presentModal(): Promise<void> { const modal = await this.modalController.create({ component: ModalComponent }); return await modal.present(); }   -  person Alyaura    schedule 23.03.2020
comment
Я нашел свою проблему и отредактировал свой первоначальный вопрос с объяснением. Нет необходимости инициализировать форму в конструкторе или проверять, является ли форма нулевой в шаблоне. Это был просто отсутствующий импорт.   -  person Alyaura    schedule 23.03.2020
comment
да, спасибо, это ответ, я просто написал его более подробно.   -  person Raul Nohea Goodness    schedule 27.06.2020

Ответы (3)


arrow_upward
6
arrow_downward

Если ваш компонент (ModalComponent) инициализируется из вашего собственного общего модуля (MyModule), вам необходимо импортировать IonicModule, чтобы он знал, как отображать с помощью атрибута value=.

мой.модуль.тс:

...
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [ModalComponent],
  imports: [CommonModule],
  exports: [ModalComponent, FormsModule, ReactiveFormsModule, IonicModule],
})
export class MyModule {}

Я просто имел дело с этим, и мне потребовалось некоторое время, чтобы понять, что код ReactiveForms пытался получить доступ к атрибуту <input value="">, которого не существовало, потому что он все еще был непреобразованным элементом <ion-input>.

person Raul Nohea Goodness    schedule 27.06.2020

arrow_upward
1
arrow_downward

У меня была та же проблема, и я исправил ее, добавив ngDefaultControl в тег ввода.

<ion-input type="text" name="address" value="" formControlName="address" ngDefaultControl></ion-input>
person Banki Louis    schedule 07.01.2021

arrow_upward
0
arrow_downward

возможно, вы используете ионный компонент, который не может использовать атрибут formControlName или пишет неправильно. например, переключить --›переключить:

<ion-togle [formControlName]="myName"></ion-togle>

(это выдает ошибку «Нет доступа к значению для управления формой с именем:...»)

вместо

<ion-toggle  [formControlName]="myName"></ion-toggle>

(работает нормально, ошибок нет)

person nativelectronic    schedule 16.03.2021