Entrar Ainda não tem acesso?
4
respostas

Componentizar Tag Input

Referente ao curso Angular parte 3: upload, build e novos componentes, no capítulo Upload de fotos e atividade Upload da foto

por Tayran Xavier de Souza
| 459.2k xp | 58 posts
Programador Java

Estou com o seguinte problema, preciso componentizar um input estilizado e gostaria que ele funcionasse com a validação do formGroup, mas quando tento adicionar um formControlName dá o seguinte erro : 

core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
No provider for NgControl ("<div class="styled-input">
    [ERROR ->]<input (formControlName)="name" (type)="type" (name)="name" required />
    <label>{{labelName}}</la"): ng:///MobileInputModule/MobileInputComponent.html@1:4
Error: Template parse errors:
No provider for NgControl ("<div class="styled-input">

Tem alguma forma de componentizar os inputs e ele continuar funcionando tudo?

4 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Tayran, beleza? Reparei que você está fazendo o event binding no input, não precisa fazer dessa maneira, pode ser feito apenas com atributos:

<input formControlName="name" type="type" name="name" required />

Se você quer passar valores dinâmicos para ele, faz com property binding:

<input [formControlName]="name" [type]="type" [name]="name" required />

Espero ter ajudado

por Tayran Xavier de Souza
| 459.2k xp | 58 posts
Programador Java 
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
No provider for NgControl ("<div class="styled-input">
    [ERROR ->]<input formControlName="name" type="type" name="name" required />
    <label>{{labelName}}</label>

Continua dando o erro.

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Você fez a importação do ReactiveFormsModule dentro do seu módulo principal?

Espero ter ajudado.

por Tayran Xavier de Souza
| 459.2k xp | 58 posts
Programador Java 
ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

      Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });
    at

Atualmente estou tendo esse erro, parece que não há forma de fazer a validação funcionar em um component externo.