ionic の 問い合わせフォームを作成する

● まずは一番シンプルなフォームを作成する

app/form/form.page.html

	<form #form="ngForm" (ngSubmit)="postForm(form.value)">
		<ion-item>
			<ion-label position="stacked">お名前 <ion-text color="danger">*</ion-text></ion-label>
			<ion-input type="text" [(ngModel)]="contact.username" name="contact.username"></ion-input>
		</ion-item>

		<ion-item>
			<ion-label position="stacked">メールアドレス <ion-text color="danger">*</ion-text></ion-label>
			<ion-input required email type="email" [(ngModel)]="contact.email" name="contact.email"></ion-input>
		</ion-item>

		<ion-item>
			<ion-label position="stacked">お問い合わせ内容 <ion-text color="danger">*</ion-text></ion-label>
			<ion-textarea [(ngModel)]="contact.content" name="contact.content"></ion-textarea>
		</ion-item>

		<div class="ion-padding">
			<ion-button expand="block" type="submit" class="ion-no-margin">送信する</ion-button>
		</div>
	</form>

app/form/form.page.ts

export class FormPage implements OnInit {

	// フォームパラメーターモデルの定義
	contact = {
		username: '' ,
		email: '' ,
		content: '',
	};

	constructor() {}
	ngOnInit() {}

	postForm(formValue){
		console.log('postForm()');
		console.log( formValue );
	}

}
No.1673
01/22 17:01

edit