Angular форма не работает одинаково в разных компонентах - PullRequest
Новая
       31

Angular форма не работает одинаково в разных компонентах

0 голосов
/ 19 июня 2020

У меня есть компонент с именем name-editor , содержащий форму. Вот так:

name-editor.component. html

<p>name editor : </p>
<label>
  Name:
  <input type="text" [formControl]="test">
</label>

<p> Value: {{ test.value }} </p>

name-editor.component.ts 


    import { Component, OnInit } from '@angular/core';
    import {FormControl} from '@angular/forms';

    @Component({
      selector: 'app-name-editor',
      templateUrl: './name-editor.component.html',
      styleUrls: ['./name-editor.component.css']
    })

    export class NameEditorComponent implements OnInit {
      test = new FormControl('test');

      ngOnInit(): void {
      }
    }

Этот компонент отлично работает, когда я вызываю его в app.component. html. НО не тогда, когда я вызываю его в компоненте main-view (а main-view сам вызывается в app.component. html). Фактически, данные из ts-кода кажутся не связанными с HTML. Ошибка выглядит так:

enter image description here

вместо

enter image description here

main-view.component. html

<div class="row">
  <div class="col-2"><app-menu></app-menu></div>

  <div class="col-5">
    <div class="card">
      <div class="card-header">
        Specification
      </div>
      <div class="card-body">
        <app-see-specification-parameter></app-see-specification-parameter>
      </div>
    </div>
  </div>


  <div class="col-5">
    <div class="card">
      <div class="card-header">
        Data Frame
      </div>
      <div class="card-body">
        <app-name-editor></app-name-editor>
      </div>
    </div>

  </div>
</div>

Я также пытался добавить код name-editor непосредственно в компонент main-view, и он тоже работает.

Я не понимаю, почему в этом месте не работает компонент.

...