Menu
register-menu
update-menu
remove-menu

Menu
create-menu
edit-menu
remove-menu






https://stackblitz.com/edit/angular-material-design-pacnbm?

file=src/app/withmaterial/withmaterial.component.html





<mat-toolbar>
Novo Cardápio
</mat-toolbar>

<form [formGroup]="menuForm" (ngSubmit)="onSubmit()">
	<div class="form-field">
    <mat-checkbox color="primary" fxFill formControlName="active">Cardápio ativo</mat-checkbox>
	</div>
	<div class="form-field">
		<mat-form-field appearance="outline" fxFlex.xs="100" fxFlex.sm="80" fxFlex.md="60"

fxFlex.lg="40" fxFlex.xl="20">
      <mat-label>Nome do cardápio</mat-label>
			<input matInput #name maxlength="150" placeholder="Cardápio exemplo"

formControlName="name" />
      <mat-hint align="end">{{name.value?.length || 0}}/150</mat-hint>
		</mat-form-field>
	</div>
	<div class="form-field">
		<mat-form-field appearance="outline" fxFlex.xs="100" fxFlex.sm="80" fxFlex.md="60"
fxFlex.lg="40" fxFlex.xl="20">
      <mat-label>Descrição do cardápio</mat-label>
			<textarea matInput #description maxlength="500" rows="3"
placeholder="Cardápio promocional do fim de semana, cardápio padrão do local, etc."

formControlName="description"></textarea>
      <mat-hint align="end">{{description.value?.length || 0}}/500</mat-hint>
		</mat-form-field>
	</div>
	<div class="form-field">
		<button mat-raised-button color="primary" type="submit">
      <mat-icon>done</mat-icon>
      Confirmar
    </button>
	</div>
</form>







mat-toolbar {
  margin-bottom: 50px;
}

mat-icon {
  margin-right: 10px;
}

.form-field {
  margin: 15px 0 15px 0;
}




import {Component} from '@angular/core';
import {FormGroup, FormBuilder, FormControl, Validators} from '@angular/forms';
/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
})
export class FormFieldOverviewExample {
  constructor(private formBuilder: FormBuilder){
  }

  menuForm = this.formBuilder.group({
    active: [true],
    name: ['', Validators.required, Validators.maxLength(150)],
    description: [''],
  });

  onSubmit(){
    console.log(this.menuForm.value)