Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ERROR in srcappadminproduct-formproduct-form.component.html(10,11): : Property 'title' does not exist on type '{}'.
- srcappadminproduct-formproduct-form.component.html(27,13): : Property 'price' does not exist on type '{}'.
- srcappadminproduct-formproduct-form.component.html(48,11): : Property 'category' does not exist on type '{}'.
- srcappadminproduct-formproduct-form.component.html(66,11): : Property 'imageUrl' does not exist on type '{}'.
- srcappadminproduct-formproduct-form.component.html(10,11): : Property 'title' does not exist on type '{}'.
- srcappadminproduct-formproduct-form.component.html(27,13): : Property 'price' does not exist on type '{}'.
- srcappadminproduct-formproduct-form.component.html(48,11): : Property 'category' does not exist on type '{}'.
- srcappadminproduct-formproduct-form.component.html(66,11): : Property 'imageUrl' does not exist on type '{}'.
- product = {};
- product: Product;
- Error: Cannot read property 'title' of undefined
- product: Product = {};
- ERROR in src/app/admin/product-form/product-form.component.ts(15,5): error TS2322: Type '{}' is not assignable to type 'Product'.
- Property '$key' is missing in type '{}'.
- import { Component, OnInit } from '@angular/core';
- import { CategoryService } from '../../category.service';
- import { ProductService } from '../../product.service';
- import { Router, ActivatedRoute } from '@angular/router';
- import 'rxjs/add/operator/take';
- @Component({
- selector: 'app-product-form',
- templateUrl: './product-form.component.html',
- styleUrls: ['./product-form.component.css']
- })
- export class ProductFormComponent implements OnInit {
- categories$;
- product = {};
- id;
- constructor(
- private router: Router,
- private route: ActivatedRoute,
- private categoryService: CategoryService,
- private productService: ProductService
- ) {
- this.categories$ = categoryService.getAll();
- this.id = this.route.snapshot.paramMap.get('id');
- if (this.id) {
- this.productService
- .get(this.id)
- .take(1)
- .subscribe(p => (this.product = p));
- }
- }
- save(product) {
- if (this.id) {
- this.productService.update(this.id, product);
- } else {
- this.productService.create(product);
- }
- this.router.navigate(['/admin/products']);
- }
- delete() {
- if (!confirm('Are you sure you want to delete?')) {
- return;
- }
- this.productService.delete(this.id);
- this.router.navigate(['/admin/products']);
- }
- ngOnInit() {}
- }
- <div class="row">
- <div class="col-md-6">
- <form #f="ngForm"
- (ngSubmit)="save(f.value)">
- <div class="form-group">
- <label for="title">Title</label>
- <input #title="ngModel"
- [(ngModel)]="product.title"
- name="title"
- tobject
- ;product
- 'ype="text"
- id="title"
- class="form-control"
- required>
- <div class="alert alert-danger"
- *ngIf="title.touched && title.invalid">Title is required.</div>
- </div>
- <div class="form-group">
- <label for="price">Price</label>
- <div class="input-group">
- <div class="input-group-addon">
- <span class="input-group-text">$</span>
- </div>
- <input #price="ngModel"
- [(ngModel)]="product.price"
- name="price"
- type="number"
- class="form-control"
- aria-label="Amount (to the nearest dollar)"
- required
- [min]="0">
- <div class="input-group-append">
- <span class="input-group-text">.00</span>
- </div>
- </div>
- <div class="alert alert-danger"
- *ngIf="price.touched && price.invalid">
- <div *ngIf="price.errors.required">Price is required.</div>
- <div *ngIf="price.errors.min">Price must be equal to or greater than zero.</div>
- </div>
- </div>
- <div class="form-group">
- <label for="category">Category</label>
- <select #category="ngModel"
- [(ngModel)]="product.category"
- name="category"
- id="category"
- class="form-control"
- required>
- <option value=""></option>
- <option *ngFor="let c of categories$ | async"
- [value]="c.$key">
- {{ c.name }}
- </option>
- </select>
- <div class="alert alert-danger"
- *ngIf="category.touched && category.invalid">Category is required.</div>
- </div>
- <div class="form-group">
- <label for="imageUrl">Image URL</label>
- <input #imageUrl="ngModel"
- [(ngModel)]="product.imageUrl"
- name="imageUrl"
- type="text"
- id="imageUrl"
- class="form-control"
- required
- url>
- <div class="alert alert-danger"
- *ngIf="imageUrl.touched && imageUrl.invalid">
- <div *ngIf="imageUrl.errors.required">Image URL is required.</div>
- <div *ngIf="imageUrl.errors.url">Image URL must be formatted correctly.</div>
- </div>
- </div>
- <button class="btn btn-primary">Save</button>
- <button type="button"
- class="btn btn-danger"
- (click)="delete()">Delete</button>
- </form>
- </div>
- <div class="col-md-6">
- <product-card [product]="product"
- [show-actions]="false"></product-card>
- </div>
- </div>
- export interface Product {
- $key: string;
- title: string;
- price: number;
- category: string;
- imageUrl: string;
- }
Add Comment
Please, Sign In to add comment