median helm
I changed from using a normal form with three inputs each encompassed in their own div, to using three mat-form-fields encompassed inside one div. Now my submit function stopped working (it was working before), I assume I am missing something but cant work out what it is, I think it is something to do with using (ngSubmit)="onSubmit()" inside "<div>". Any help would be appreciated! The commented out code at the top is my old working input form.
<h1>Register</h1>
<!-- <form [formGroup]="form" (ngSubmit)="onSubmit()">
<div>
<input type="text" placeholder="Username" formControlName="username"/>
</div>
<div>
<input type="text" placeholder="Email" formControlName="email"/>
</div>
<div>
<input type="password" placeholder="Password" formControlName="password"/>
</div>
<div>
<button type="submit">Register</button>
</div>
</form> -->
<div class="example-container" [formGroup]="form" (ngSubmit)="onSubmit()">
<mat-form-field >
<mat-label>Enter your username</mat-label>
<input matInput
type="text"
placeholder=""
formControlName="username"
required>
</mat-form-field>
<mat-form-field>
<mat-label>Enter your email</mat-label>
<input matInput
type="email"
placeholder="[email protected]"
formControlName="email"
required>
</mat-form-field>
<mat-form-field>
<mat-label>Enter your password</mat-label>
<input matInput [type]="hide ? 'password' : 'text'" formControlName="password">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<button type="submit">Submit</button>
</div>
swift oasis