Alt bileşendeki NgModel üst forma ulaşamıyor

Bu uyarı, ngModel (veya herhangi bir template-driven form kontrolü), üst bileşeni bir form direktifi (NgForm veya FormGroupDirective) barındıran bir alt bileşenin içine yerleştirildiğinde, ancak kontrol o forma kaydolamadığında yayılır.

Temel neden, NgModel'in ControlContainer'ı @Host() ile enjekte etmesidir; bu da injector'ın bileşen sınırlarını aşmasını engeller. Üst bileşenin şablonundaki form direktifi, alt bileşenin şablonundaki NgModel tarafından görülemez.

Sonuç olarak, alt bileşenin kontrolleri sessizce bağımsız (standalone) olarak davranır; üst formun değerine, geçerliliğine veya gönderim durumuna katılmazlar.

Uyarıyı düzeltme

Seçenek 1: ControlContainer'ı viewProviders ile köprüleyin

Alt bileşene viewProviders ekleyin; böylece üst formu kendi görünümüne yeniden sunar. Uyarıda adı geçen sınıfın aynısını kullanın: template-driven formlar (<form>) için NgForm, reactive formlar ([formGroup]) için ise FormGroupDirective:

// Üst bileşen template-driven bir form kullanıyor: <form> ... <app-child> </form>
import {ControlContainer, NgForm} from '@angular/forms';
import {Component} from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<input name="email" [(ngModel)]="email" />`,
  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
})
export class Child {
  email = '';
}

// Üst bileşen reactive bir form kullanıyor: <div [formGroup]="myGroup"> ... <app-child> </div>
import {ControlContainer, FormGroupDirective} from '@angular/forms';
import {Component} from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<input name="email" [(ngModel)]="email" />`,
  viewProviders: [{provide: ControlContainer, useExisting: FormGroupDirective}],
})
export class Child {
  email = '';
}

Ardından üst form, alt bileşenin kontrollerini normal şekilde görür ve doğrular.

Seçenek 2: Kontrolü standalone olarak işaretleyin

Alt bileşenin kontrolleri gerçekten üst formdan bağımsız olmalıysa, bunu açıkça belirtin:

<input name="email" [(ngModel)]="email" [ngModelOptions]="{standalone: true}" />

Uyarıyı ayıklama

Uyarı mesajı NG01354 hata kodunu içerir. Hangi ngModel'in uyarıyı tetiklediğini bulmak için çağrı yığınını kullanın. <form> etiketine sahip bileşenin, ngModel input'una sahip bileşenle aynı olup olmadığını kontrol edin; farklıysa, yukarıdaki seçeneklerden birini uygulayın.