CODEWITHSUNDEEP
javascripthtmlangularformsangular-material
AntonBoarf
AntonBoarf

Reputation: 1313

Angular forms with Material

I'm trying to build a form with Angular Material. This form enables the client to modify his personal data (with input fields). For this case I'm using "mat-form-field" components

But there are also some fields he can't modify (like his first name). For this case I don't know what element to use. I would like some compatible with Material design but I can't find any.

Here is my code :

<form [formGroup]="form" (ngSubmit)="onSubmit()" fxLayout="column"fxLayoutAlign="center center">

    <mat-form-field>
        <label for="">First Name :</label> // THIS THE PART THAT CAUSES PROBLEM
        <span matInput>Peter</span>
    </mat-form-field>

    <mat-form-field>
      <input type="email" matInput placeholder="your email" formControlName="email" >
   </mat-form-field>

    <button mat-raised-button type="submit">Submit</button>
  </form>

Any idea to make something nice ?

Thanks

Upvotes: 1

Views: 1941

Answers (4)

ANKIT MISHRA
ANKIT MISHRA

Reputation: 606

    Html
    
    <div class="login-wrapper center" fxLayout="row" fxLayoutAlign="center center">
        <mat-card class="box">
          <mat-card-header>
            <mat-card-title>Register</mat-card-title>
          </mat-card-header>
          <form class="example-form" #f="ngForm" (ngSubmit)="onSubmit(f.value)">
            <mat-card-content>
              <mat-form-field class="example-full-width" hintLabel="Name should be atlease 3 character">
                <input matInput placeholder="Name" ngModel name="fName" required minlength="3" #fName="ngModel">
                <mat-error *ngIf="!fName.hasError('required')">F Name is required</mat-error>  
            </mat-form-field>
              <mat-form-field class="example-full-width" hintLabel="Should be valid email">
                <input matInput placeholder="Email" ngModel name="email" 
                email required #emailInp="ngModel"
                >
                <!-- <mat-hint>Should be valid email</mat-hint> -->
                <mat-error *ngIf="!emailInp.hasError('required')">E-Mail is invalid</mat-error>
                <mat-error *ngIf="emailInp.hasError('required')">Not be empty</mat-error>
              </mat-form-field>
    
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Password" ngModel name="password"
                required minlength="6" #pwInput="ngModel"
                >
                <mat-hint align="end">{{ pwInput.value?.length }} / 6</mat-hint>
                <mat-error *ngIf="pwInput.hasError('required')">Not be empty</mat-error>
                <mat-error *ngIf="!pwInput.hasError('required')">Should be atlease 6 character</mat-error>
              </mat-form-field>
              <mat-form-field class="example-full-width" hintLabel="required">
                <mat-label>Choose a Gender...</mat-label>
                <mat-select ngModel name="gender" required #gend="ngModel">
                  <mat-option [value]="roles" *ngFor="let roles of Roles">{{roles}}
                  </mat-option>
                </mat-select>
    
                <mat-error *ngIf="gend.hasError('required')">Select Any Gender</mat-error>
              </mat-form-field>
    
              <mat-form-field class="example-full-width">
                <mat-label>Choose birth date</mat-label>
                <input matInput [matDatepicker]="picker" [max]="maxDate"
                 required ngModel name="datePicker"
                >
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
              
                <mat-checkbox ngModel name="agree" required color="primary">Agree to terms & conditions</mat-checkbox>            
                <!-- <mat-checkbox labelPosition="before">Agree to terms & conditions</mat-checkbox>             -->
    
              </mat-card-content>
    
            <button mat-stroked-button color="accent" class="btn-block" [disabled]="!f.valid">Register</button>
          </form>
        </mat-card>
      </div>
    
    
    -----------css
    /* You can add global styles to this file, and also import other style files */
    @import "@angular/material/prebuilt-themes/indigo-pink.css";
    
    html,
    body {
      height: 100%;
    }
    body {
      margin: 0;
      font-family: 'Roboto, sans-serif';
      min-height: 100vh;
      background: #e2e2e2;
    }
    .app-header {
      justify-content: space-between;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
    }
    .login-wrapper {
      height: 100%;
    }
    .positronx {
      text-decoration: none;
      color: #ffffff;
    }
    .box {
      position: relative;
      top: 0;
      opacity: 1;
      float: left;
      padding: 60px 50px 40px 50px;
      width: 100%;
      background: #fff;
      border-radius: 10px;
      transform: scale(1);
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      z-index: 5;
      max-width: 330px;
    }
    .box.back {
      transform: scale(.95);
      -webkit-transform: scale(.95);
      -ms-transform: scale(.95);
      top: -20px;
      opacity: .8;
      z-index: -1;
    }
    .box:before {
      content: "";
      width: 100%;
      height: 30px;
      border-radius: 10px;
      position: absolute;
      top: -10px;
      background: rgba(255, 255, 255, .6);
      left: 0;
      transform: scale(.95);
      -webkit-transform: scale(.95);
      -ms-transform: scale(.95);
      z-index: -1;
    }
    .login-wrapper .example-form {
      min-width: 100%;
      max-width: 300px;
      width: 100%;
    }
    .login-wrapper .example-full-width,
    .login-wrapper .btn-block {
      width: 100%;
    }
    .login-wrapper mat-card-header {
      text-align: center;
      width: 100%;
      display: block;
      font-weight: 700;
    }
    .login-wrapper mat-card-header mat-card-title {
      font-size: 30px;
      margin: 0;
    }
    .login-wrapper .mat-card {
      padding: 40px 70px 50px;
    }
    .login-wrapper .mat-stroked-button {
      border: 1px solid currentColor;
      line-height: 54px;
      background: #FFF7FA;
    }
    .login-wrapper .mat-form-field-appearance-legacy .mat-form-field-infix {
      padding: 0.8375em 0;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
    ------------Ts
    import { Component, OnInit } from '@angular/core';
    import { NgForm } from '@angular/forms';
    
    @Component({
      selector: 'app-signup',
      templateUrl: './signup.component.html',
      styleUrls: ['./signup.component.scss']
    })
    export class SignupComponent implements OnInit {
    Roles:any = ['Male', 'Female'];
    maxDate: any;
      constructor() { }
    
      ngOnInit(): void {
        this.maxDate = new Date();
        this.maxDate.setFullYear(this.maxDate.getFullYear() - 18);
      }
    
      onSubmit(f: NgForm){
        console.log(f)
      }
    }

-------------Material Module
import { NgModule } from "@angular/core";


import { MatToolbarModule } from '@angular/material/toolbar';
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSelectModule } from '@angular/material/select';
import { MatNativeDateModule, MatOptionModule } from '@angular/material/core';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatSidenavModule} from '@angular/material/sidenav';


@NgModule({
    imports: [
        MatToolbarModule,
        MatInputModule,
        MatCardModule,
        MatMenuModule,
        MatIconModule,
        MatButtonModule,
        MatTableModule,
        MatSlideToggleModule,
        MatSelectModule,
        MatOptionModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatCheckboxModule,
        MatSidenavModule

    ],
    exports: [
        MatToolbarModule,
        MatInputModule,
        MatCardModule,
        MatMenuModule,
        MatIconModule,
        MatButtonModule,
        MatTableModule,
        MatSlideToggleModule,
        MatSelectModule,
        MatOptionModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatCheckboxModule,
        MatSidenavModule
    ]
})


export class MaterialModule { }

Upvotes: 0

Papa Kojo
Papa Kojo

Reputation: 813

For reactive forms you have to disable the name formcontrol in the component like this:

this.form = this.fb.group({name:[{value:'nameValue',disabled:true}]})

Just that this.form.value.name won't work. You have to use this.form.getRawValue() for it to include the name value. The name shouldn't have to be a form field in this manner. You can just display it as a string.

Upvotes: 0

Preston
Preston

Reputation: 3528

My form looks a bit different. I don't see the direct problem with yours but I suspect the problem is you have two form fields instead of one. You can play around with this on my Stackblitz for Mat Table: Mat Table Stackbliz

There are lots of stuff there that could be useful.

      <li>
        <label class="label-pad">First name: </label>
        <mat-form-field class="inputBackground">
          <input matInput #firstName maxlength="30" class="inputField" type="text" id="first_name"
                 formControlName="first_name" [errorStateMatcher]="matcher" required>
          <mat-hint align="end">{{firstName.value?.length || 0}}/30</mat-hint>
          <mat-error>{{ errors.required }}</mat-error>
        </mat-form-field>
      </li>

Upvotes: 0

Kalamarico
Kalamarico

Reputation: 5656

The possibility of modify or not modify it's a field attribute, only the data type defines the choice for the element you need to use. So, in the example of first name, the choice, as you said, is an input text, only you need to set the disabled or readonly attribute, you can choose among these options:

<input type="text" disabled="disabled" />

Or:

<input type="text" readonly="readonly" />

Material doesn't define any special thing for disabled beyond the standard says. And of course, place those disabled/readonly inputs inside a <mat-form-field> to wrap the material styles.

Upvotes: 1

Related Questions