# ng + bootstrap-datepicker

[TOC]

###### tags: `chatgpt`

---

## 以 Angular 14、ng-bootstrap 搞一個 form 處理的專案，template-driven 跟 reactive forms 都要

好的，以下是以 Angular 14 和 ng-bootstrap 搭配 template-driven 和 reactive forms 來建立一個 form 處理專案的步驟：

1. 創建一個新的 Angular 專案，可以使用 Angular CLI：

ng new my-form-project

2. 安裝 ng-bootstrap 套件：

npm install --save @ng-bootstrap/ng-bootstrap

3. 引入需要使用的 `ng-bootstrap` 模塊，在 `app.module.ts` 中引入 `NgbModule`：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // 引入 FormsModule 和 ReactiveFormsModule
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; // 引入 NgbModule

import { AppComponent } from './app.component';

@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, FormsModule, ReactiveFormsModule, NgbModule], // 引入 NgbModule
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {}

4. 創建一個新的組件，例如 `app-form.component`：

ng generate component app-form

5. 在 `app-form.component.html` 中創建一個表單，包括 template-driven 和 reactive forms 的範例：

<h1>Template-driven form</h1>
<form #templateForm="ngForm">
	<div class="form-group">
		<label for="name">Name</label>
		<input type="text" class="form-control" id="name" name="name" ngModel required>
	</div>
	<div class="form-group">
		<label for="email">Email</label>
		<input type="email" class="form-control" id="email" name="email" ngModel required email>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>

<hr>

<h1>Reactive form</h1>
<form [formGroup]="reactiveForm" (ngSubmit)="onSubmit()">
	<div class="form-group">
		<label for="name">Name</label>
		<input type="text" class="form-control" id="name" formControlName="name">
	</div>
	<div class="form-group">
		<label for="email">Email</label>
		<input type="email" class="form-control" id="email" formControlName="email">
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>

6. 在 `app-form.component.ts` 中添加相應的邏輯：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
	selector: 'app-form',
	templateUrl: './app-form.component.html',
})
export class AppFormComponent {
	reactiveForm: FormGroup;

	constructor(private fb: FormBuilder) {
		// 初始化 reactive form
		this.reactiveForm = this.fb.group({
			name: ['', Validators.required],
			email: ['', [Validators.required, Validators.email]],
		});
	}

	onSubmit() {
		console.log(this.reactiveForm.value);
	}
}

7. 在 `app.component.html` 中使用 `app-form` 組件：

<app-form></app-form>

## 在 Angular 14 專案如何實作 uxsolutions 的 bootstrap-datepicker

以下是在 Angular 14 專案中使用 uxsolutions 的 bootstrap-datepicker 的步驟：

1. 安裝 bootstrap 和 bootstrap-datepicker 的相關套件：

npm install --save bootstrap jquery @popperjs/core bootstrap-datepicker

2. 在 `angular.json` 中添加相關的引用：

{
	"architect": {
		"build": {
			"options": {
				"styles": [
					"node_modules/bootstrap/dist/css/bootstrap.min.css",
					"node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css",
					"src/styles.css"
				],
				"scripts": [
					"node_modules/jquery/dist/jquery.min.js",
					"node_modules/@popperjs/core/dist/umd/popper.min.js",
					"node_modules/bootstrap/dist/js/bootstrap.min.js",
					"node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
				]
			}
		}
	}
}

3. 在 `app.module.ts` 中引入所需的模塊：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import * as $ from 'jquery'; // 引入 jQuery
import * as bootstrap from 'bootstrap'; // 引入 Bootstrap
import * as bootstrapDatepicker from 'bootstrap-datepicker'; // 引入 bootstrap-datepicker

@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, FormsModule, NgbModule],
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {
	constructor() {
	// 初始化日期選擇器
		$('.datepicker').datepicker({
			format: 'yyyy/mm/dd',
			autoclose: true,
			todayHighlight: true,
		});
	}
}

4. 在 `app.component.html` 中添加日期選擇器：

<input type="text" class="form-control datepicker" [(ngModel)]="date">

5. 啟動應用程序，並在日期輸入框中單擊以查看日期選擇器。

## Alibaba Cloud Linux 3 的 docker image 在哪個 registry 找得到

您可以在阿里雲的 Container Registry 中找到 Alibaba Cloud Linux 3 的 Docker Image。以下是該映像的地址：

registry.cn-hangzhou.aliyuncs.com/acs/alinux

要下載此映像，您需要先登錄到 Container Registry，方法如下：

1. 首先，使用您的阿里雲帳戶登錄到 Container Registry。在命令行中輸入以下命令：

docker login --username=<您的阿里雲帳戶名稱> registry.cn-hangzhou.aliyuncs.com

2. 輸入您的密碼，以完成登錄。

3. 現在，您可以使用以下命令來下載 Alibaba Cloud Linux 3 映像：

docker pull registry.cn-hangzhou.aliyuncs.com/acs/alinux:3.0

注意，這個映像標籤是 "`:3.0`"，這表示您正在下載版本 **`3`** 的映像。如果您需要不同的版本，請使用不同的標籤。

完成後，您可以使用 `docker run` 命令來運行此映像。例如，以下命令將運行一個容器並打印版本信息：

docker run --rm registry.cn-hangzhou.aliyuncs.com/acs/alinux:3.0 cat /etc/os-release

希望這能幫助到您。