title: Error-Property value does not exist in type name string
body: <p>I hope this question clarifies so many people about testing template driven forms that Angular documentation barely mentions. I have an input inside this form that I want to test.
  I want to test a simple DOM in Angular using Jasmine. This is a template driven form using NgForm like this:</p>
  
  <pre><code>&lt;form name="editForm" role="form"  novalidate (ngSubmit)="save()" #editForm="ngForm"&gt;
      &lt;input #inputtotest type="text" class="form-control" name="nombre" id="field_nombre"
          [(ngModel)]="paciente.nombre" required/&gt;               
  </code></pre>
  
  <p>I want to test only:</p>
  
  <ul>
  <li>If this input for this label sends data (<strong>paciente.nombre</strong>) using NgModel or better if its Property is paciente.model.</li>
  </ul>
  
  <p>According to this responses we can use <code>ViewChild</code> for that: <a href="https://alligator.io/angular/viewchild-access-component/" rel="nofollow noreferrer">use of viewchild on DOM</a> <a href="https://stackoverflow.com/questions/34820706/how-to-get-ngform-variable-reference-in-the-component-class">How to get ngForm variable reference in the component class</a></p>
  
  <p>My component file is like this:</p>
  
  <pre><code>//all the other imports
  import { ViewChild } from '@angular/core';
  
  @Component({
     ...
  })
  
  export class PacienteDialogComponent implements OnInit 
  {
      @ViewChild('inputtotest') inputtotest: **ElementRef**;  //Create a viewchild of my input s I can obtain its value
      paciente: Paciente; //Paciente is a modal that initializes the nombre
      ...
  }
  </code></pre>
  
  <p>And my spec file to write the tests for the form is like this:</p>
  
  <pre><code>//All te Angular imports
  describe('Component Tests', () =&gt; {
  
      describe('Paciente Management Dialog Component', () =&gt; {
          let comp: PacienteDialogComponent;
          let fixture: ComponentFixture&lt;PacienteDialogComponent&gt;;
          //starts my code
          let input: HTMLElement;
  
          beforeEach(async(() =&gt; {
              TestBed.configureTestingModule({
                  .....angular imports                        
  
  
          }));
  
          beforeEach(() =&gt; {
              fixture = TestBed.createComponent(PacienteDialogComponent);
              comp = fixture.componentInstance;
              input = `fixture.debugElement.query(By.css('inputtotest')).nativeElement;`
          });
  </code></pre>
  
  <p>Tests: </p>
  
  <pre><code>it ('The form should call save method on submit', async(() =&gt; {
      fixture.detectChanges(); 
      spyOn(comp,'save');
      savebutton.click();
      expect(comp.save).toHaveBeenCalledTimes(0);
  }));
  
  
  
  it ('The form should have the input for paciente.nombre', async(() =&gt; {
      fixture.detectChanges();
  
  
  expect(inputname.getAttribute.value).toEqual(paciente.nombre);
  
  }));
  </code></pre>
  
  <p>Now I have obtained the input as a HTMLelement and I do not find any way on how to check that it is Equal to ngModel value that is paciente.nombre. I do it like in the example and the result is the error:</p>
  
  <p>Property value does not exist in type name string.
  Have I done something wrong?</p>