import { Component, forwardRef, OnInit } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { Observable, of } from "rxjs";
@Component({
selector: "app-string-select",
templateUrl: "./string-select.component.html",
styleUrls: ["./string-select.component.css"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => StringSelectComponent),
multi: true
}
]
})
export class StringSelectComponent implements ControlValueAccessor {
value: string[] = [];
allToppings$: Observable<string[]> = of([
"Extra cheese",
"Mushroom",
"Onion",
"Pepperoni",
"Sausage",
"Tomato"
]);
onChange: any = () => {};
onTouched: any = () => {};
constructor() {}
writeValue(value: string): void {
this.value = value.split(",");
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
emitChange() {
this.onChange(this.value.join(","));
}
}
import { Component, forwardRef, OnInit } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { Observable, of } from "rxjs";
@Component({
selector: "app-string-select",
templateUrl: "./string-select.component.html",
styleUrls: ["./string-select.component.css"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => StringSelectComponent),
multi: true
}
]
})
export class StringSelectComponent implements ControlValueAccessor {
value: string[] = [];
allToppings$: Observable<string[]> = of([
"Extra cheese",
"Mushroom",
"Onion",
"Pepperoni",
"Sausage",
"Tomato"
]);
onChange: any = () => {};
onTouched: any = () => {};
constructor() {}
writeValue(value: string): void {
this.value = value.split(",");
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
emitChange() {
this.onChange(this.value.join(","));
}
}
<mat-form-field appearance="fill">
<mat-label>Toppings</mat-label>
<mat-select [(ngModel)]="value" (ngModelChange)='emitChange()' multiple>
<mat-option *ngFor="let topping of allToppings$ | async" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Toppings</mat-label>
<mat-select [(ngModel)]="value" (ngModelChange)='emitChange()' multiple>
<mat-option *ngFor="let topping of allToppings$ | async" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, FormGroup, FormBuilder} from '@angular/forms';
import {Observable, of } from 'rxjs';
import {tap } from 'rxjs/operators';
/** @title Select with multiple selection */
@Component({
selector: 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SelectMultipleExample {
demandeDevis: FormGroup = this.formBuilder.group({ toppings: ['']});
initialToppings$: Observable<string> = of('Onion,Pepperoni,Tomato').pipe(
tap(toppings => this.toppings.patchValue(toppings))
)
get toppings(): FormControl {
return this.demandeDevis.get('toppings') as FormControl
};
constructor(private formBuilder: FormBuilder) {}
validateForm(){
const valuesForm = this.toppings.value;
console.log(valuesForm);
}
}
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, FormGroup, FormBuilder} from '@angular/forms';
import {Observable, of } from 'rxjs';
import {tap } from 'rxjs/operators';
/** @title Select with multiple selection */
@Component({
selector: 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SelectMultipleExample {
demandeDevis: FormGroup = this.formBuilder.group({ toppings: ['']});
initialToppings$: Observable<string> = of('Onion,Pepperoni,Tomato').pipe(
tap(toppings => this.toppings.patchValue(toppings))
)
get toppings(): FormControl {
return this.demandeDevis.get('toppings') as FormControl
};
constructor(private formBuilder: FormBuilder) {}
validateForm(){
const valuesForm = this.toppings.value;
console.log(valuesForm);
}
}
<form [formGroup]="demandeDevis" *ngIf="initialToppings$ | async">
<app-string-select formControlName='toppings'></app-string-select>
<div>
<button (click)="validateForm()" >
Validate
</button>
</div>
</form>
<form [formGroup]="demandeDevis" *ngIf="initialToppings$ | async">
<app-string-select formControlName='toppings'></app-string-select>
<div>
<button (click)="validateForm()" >
Validate
</button>
</div>
</form>
