Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Input
<!-- input -->
<md-input-container>
<input mdInput placeholder="氏名..." value="田中 太郎" />
</md-input-container>
<br>
<br>
<!-- hint -->
<md-input-container>
<input mdInput placeholder="パスワード" type="password" #password />
<md-hint>({{password.value.length}}/16)</md-hint>
</md-input-container>
<br>
<br>
<!-- month -->
<md-input-container>
<input mdInput #month type="month" placeholder="Month">
</md-input-container>
<br>
<br>
<!-- ErrorMessage -->
<md-input-container>
<!-- fromControlを使うには、ReactiveFormsModuleをインポートする必要がある。 -->
<input mdInput placeholder="E-mail" [formControl]="emailFormControl">
<md-error *ngIf="emailFormControl.hasError('pattern')">pattern error</md-error>
<md-error *ngIf="emailFormControl.hasError('required')">required error</md-error>
</md-input-container>
<br>
<br>
<!-- Prefix & Suffix -->
<md-input-container>
<span mdPrefix>+1 &nbsp;</span>
<input mdInput [(ngModel)]="prefix" (change)="onChange()">
<md-icon mdSuffix>mode_edit</md-icon>
</md-input-container>
import { Component, OnInit } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {
ngOnInit() {}
emailFormControl = new FormControl(
'',
[Validators.required,Validators.pattern(EMAIL_REGEX)]
)
prefix = 'abc';
onChange() : void {
console.log(this.prefix);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment