composant plantForm + model
This commit is contained in:
parent
d25efc4f73
commit
9ffaa62e0f
@ -1 +1,126 @@
|
||||
<p>formulaire works!</p>
|
||||
<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputName"
|
||||
placeholder=""
|
||||
name="name"
|
||||
formControlName="nameFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['nameFc'].touched &&
|
||||
plantForm.controls['nameFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['nameFc'].touched &&
|
||||
!plantForm.controls['nameFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputName">Nom</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputPrice"
|
||||
placeholder=""
|
||||
name="price"
|
||||
formControlName="priceFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['priceFc'].touched &&
|
||||
plantForm.controls['priceFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['priceFc'].touched &&
|
||||
!plantForm.controls['priceFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputPrice">Prix</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="floatingInputQuantity"
|
||||
placeholder=""
|
||||
name="quantity"
|
||||
formControlName="quantityFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['quantityFc'].touched &&
|
||||
plantForm.controls['quantityFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['quantityFc'].touched &&
|
||||
!plantForm.controls['quantityFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputQuantity">Quantité</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingCategory"
|
||||
placeholder=""
|
||||
name="category"
|
||||
formControlName="categoryFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['categoryFc'].touched &&
|
||||
plantForm.controls['categoryFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['categoryFc'].touched &&
|
||||
!plantForm.controls['categoryFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputCategory">Catégorie</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="floatingRating"
|
||||
placeholder=""
|
||||
name="rating"
|
||||
formControlName="ratingFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['ratingFc'].touched &&
|
||||
plantForm.controls['ratingFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['ratingFc'].touched &&
|
||||
!plantForm.controls['ratingFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingRating">Note</label>
|
||||
</div>
|
||||
<div class="form-floating select">
|
||||
<select
|
||||
class="form-control"
|
||||
id="floatingInputInStock"
|
||||
placeholder=""
|
||||
name="inStock"
|
||||
formControlName="inStockFc"
|
||||
>
|
||||
<option value="disponible">Disponible</option>
|
||||
<option value="partiellement disponible">Partiellement disponible</option>
|
||||
<option value="non disponible">Non disponible</option>
|
||||
</select>
|
||||
<label value="disponible">Sélectionnez disponibilité</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="plantForm.invalid"
|
||||
>
|
||||
Créer une plante
|
||||
</button>
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="plantForm.invalid"
|
||||
>
|
||||
Modifier une plante
|
||||
</button>
|
||||
</form>
|
||||
|
@ -1,15 +1,17 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-formulaire',
|
||||
templateUrl: './formulaire.component.html',
|
||||
styleUrls: ['./formulaire.component.scss']
|
||||
styleUrls: ['./formulaire.component.scss'],
|
||||
})
|
||||
export class FormulaireComponent implements OnInit {
|
||||
plantForm!: FormGroup;
|
||||
constructor() {}
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
ngOnInit(): void {}
|
||||
|
||||
onSubmit(){}
|
||||
}
|
||||
|
||||
|
7
src/app/modules/admin/models/category.spec.ts
Normal file
7
src/app/modules/admin/models/category.spec.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Category } from './category';
|
||||
|
||||
describe('Category', () => {
|
||||
it('should create an instance', () => {
|
||||
expect(new Category()).toBeTruthy();
|
||||
});
|
||||
});
|
3
src/app/modules/admin/models/category.ts
Normal file
3
src/app/modules/admin/models/category.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export class Category {
|
||||
name: string[]=['plantes vertes'];
|
||||
}
|
7
src/app/modules/admin/models/plant.spec.ts
Normal file
7
src/app/modules/admin/models/plant.spec.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Plant } from './plant';
|
||||
|
||||
describe('Plant', () => {
|
||||
it('should create an instance', () => {
|
||||
expect(new Plant()).toBeTruthy();
|
||||
});
|
||||
});
|
14
src/app/modules/admin/models/plant.ts
Normal file
14
src/app/modules/admin/models/plant.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { Category } from "./category";
|
||||
|
||||
export class Plant {
|
||||
constructor(
|
||||
public name: string='',
|
||||
public price: number =1,
|
||||
public quantity: number= 0,
|
||||
public instock: boolean= true,
|
||||
public category:Category,
|
||||
public urlPicture: string = "https//picsum.photos/id/18/200/300",
|
||||
public rating: number = 0,
|
||||
public id?: number
|
||||
){}
|
||||
}
|
Loading…
Reference in New Issue
Block a user