Olá, estou fazendo a aula 6 e depois que crio o formulário para o cadastro de fotos não consigo fazer o submit do formulário. Na console mostra que não foi possível achar os inputs. Segue o erro:
core.umd.js:3467 ORIGINAL STACKTRACE: ErrorHandler.handleError @ core.umd.js:3467 next @ core.umd.js:6924 schedulerFn @ core.umd.js:6172 SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238 SafeSubscriber.next @ Subscriber.ts:190 Subscriber._next @ Subscriber.ts:135 Subscriber.next @ Subscriber.ts:95 Subject.next @ Subject.ts:61 EventEmitter.emit @ core.umd.js:6164 onError @ core.umd.js:6388 onHandleError @ core.umd.js:6263 ZoneDelegate.handleError @ zone.js:196 Zone.runGuarded @ zone.js:102 _loop_1 @ zone.js:368 drainMicroTaskQueue @ zone.js:375 ZoneTask.invoke @ zone.js:297 core.umd.js:3468 Error: Uncaught (in promise): Error: Error in http://localhost:3000/app/cadastro/cadastro.component.html:6:23 caused by: Cannot read property 'titulo' of undefined at resolvePromise (zone.js:418) at zone.js:395 at ZoneDelegate.invoke (zone.js:192) at Object.onInvoke (core.umd.js:6242) at ZoneDelegate.invoke (zone.js:191) at Zone.run (zone.js:85) at zone.js:451 at ZoneDelegate.invokeTask (zone.js:225) at Object.onInvokeTask (core.umd.js:6233) at ZoneDelegate.invokeTask (zone.js:224)
Esse é o meu CadastroComponent
import { Component, Input } from '@angular/core';
import { FotoComponent } from '../foto/foto.component';
@Component({
moduleId: module.id,
selector: 'cadastro',
templateUrl: './cadastro.component.html'
})
export class CadastroComponent {
foto: FotoComponent = new FotoComponent();
cadastrar() {
console.log(this.foto);
}
}
e esse o meu template:
<div class="container">
<form (submit)="cadastrar($event)" class="row">
<div class="col-md-6">
<div class="form-group">
<label>Título</label>
<input [value]="foto.titulo" class="form-control" autocomplete="off">
</div>
<div class="form-group">
<label>URL</label>
<input [value]="foto.url" class="form-control" autocomplete="off">
</div>
<div class="form-group">
<label>Descrição</label>
<textarea [value]="foto.descricao" class="form-control" autocomplete="off">
</textarea>
</div>
<button type="submit" class="btn btn-primary">
Salvar
</button>
<a [routerLink]="['']" class="btn btn-primary">Voltar</a>
<hr>
</div>
</form>
</div>
Alguém consegue dar uma ajuda? Estou começando agora com Angular...