Angular Components 2

Question

I’m having doubts about component inputs:

I have a component called field

.ts

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


@Component({
  selector: 'app-field',
  templateUrl: './field.component.html',
  styleUrls: ['./field.component.css']
})
export class FieldComponent implements OnInit {

  @Input() tamanho: String = '';
  @Input() tipo: String = '';
  @Input() placeholder: String = '';
  @Input() id: String = '';
  @Input() label: String = '';
  @Input() model: String = '';



  constructor() { }

  ngOnInit() {
  }

}

.html

<div class="{{ tamanho}}">
    <div class="form-group">
        <label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = {{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</div>

I am using it to facilitate inputs in my registration forms, however I am not able to pass the name of ngModel via input,

Follow how I’m calling this component on other screens

  <app-field id="codigo" model="TipoPessoa.Codigo" label="Código" tamnho="col-md-2" tipo="text"></app-field>

the following error is displayed

compiler.js:2175 Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("up">
        <label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [ERROR ->][(ngModel)] = {{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
 "): ng:///AppModule/FieldComponent.html@3:45
Parser Error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("up">
        <label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [ERROR ->][(ngModel)] = {{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
 "): ng:///AppModule/FieldComponent.html@3:45
Parser Error: Missing expected : at column 8 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("up">
        <label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [ERROR ->][(ngModel)] = {{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
 "): ng:///AppModule/FieldComponent.html@3:45
Parser Error: Unexpected token } at column 8 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("up">
        <label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [ERROR ->][(ngModel)] = {{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
 "): ng:///AppModule/FieldComponent.html@3:45
Parser Error: Unexpected token '}' at column 9 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("up">
        <label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [ERROR ->][(ngModel)] = {{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
 "): ng:///AppModule/FieldComponent.html@3:45
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = [ERROR ->]{{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</di"): ng:///AppModule/FieldComponent.html@3:59
Parser Error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = [ERROR ->]{{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</di"): ng:///AppModule/FieldComponent.html@3:59
Parser Error: Missing expected : at column 8 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = [ERROR ->]{{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</di"): ng:///AppModule/FieldComponent.html@3:59
Parser Error: Unexpected token } at column 8 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = [ERROR ->]{{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</di"): ng:///AppModule/FieldComponent.html@3:59
Parser Error: Unexpected token '}' at column 9 in [{{model}}] in ng:///AppModule/FieldComponent.html@3:45 ("label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = [ERROR ->]{{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</di"): ng:///AppModule/FieldComponent.html@3:59
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{model}}=$event] in ng:///AppModule/FieldComponent.html@3:59 ("label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = [ERROR ->]{{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</di"): ng:///AppModule/FieldComponent.html@3:59
Parser Error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{model}}=$event] in ng:///AppModule/FieldComponent.html@3:59 ("label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = [ERROR ->]{{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</di"): ng:///AppModule/FieldComponent.html@3:59
Parser Error: Missing expected : at column 8 in [{{model}}=$event] in ng:///AppModule/FieldComponent.html@3:59 ("label for="{{ id }}">{{ label }}</label>
        <input id="{{ id }}" name="{{ id }}" [(ngModel)] = [ERROR ->]{{model}}   class="form-control" type="{{ tipo }}" placeholder="{{ placeholder }}" />
    </div>
</di"): ng:///AppModule/FieldComponent.html@3:59
Parser Ecompiler.js:2175)
    at TemplateParser.parse (compiler.js:11169)
    at JitCompiler._parseTemplate (compiler.js:25541)
    at JitCompiler._compileTemplate (compiler.js:25529)
    at compiler.js:25473
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25473)
    at compiler.js:25386
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25385)
syntaxError @ compiler.js:2175
parse @ compiler.js:11169
_parseTemplate @ compiler.js:25541
_compileTemplate @ compiler.js:25529
(anonymous) @ compiler.js:25473
_compileComponents @ compiler.js:25473
(anonymous) @ compiler.js:25386
then @ compiler.js:2166
_compileModuleAndComponents @ compiler.js:25385
compileModuleAsync @ compiler.js:25347
compileModuleAsync @ platform-browser-dynamic.js:216
compileNgModuleFactory__PRE_R3__ @ core.js:31350
bootstrapModule @ core.js:31655
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1