通过Angular 7和Angular Material实现Address Form
通过Angular Material实现地址表单
视频解说（日语）
视频解说（英语）
必要的环境
我将介绍在Angular 7中使用Angular Material创建地址表单的方法。
“地址表单”是在购物网站等进行购物时必须填写的固定格式表单，用于输入姓名、地址等信息。
使用Angular Material可以轻松创建该模板。
需要注意的是，在以下说明中，需要系统已安装 Angular7，如果您还未安装，请提前安装好。
此外，在Angular7中，
创建一个新项目，命名为[项目名称]。
请事先创建一个独特的项目。
一旦项目生成成功，就会进入该项目所在的目录。
在这里，该项目是ng7MaterialAddressForm。
然后，输入「code .」以启动Visual Studio Code。
使用Angular Material安装
一旦 VS Code 启动后，使用 Control + @ 键可以打开终端窗口。
然后输入ng add @angular/material，安装Angular Material。
因此，由于关于颜色组合主题的查询，我们将选择标准的靛蓝 – 粉红色组合。
接下来，有关是否设置HammerJS的询问，请输入y。
有人询问是否需要使用动画，所以请回复”y”。
然后，会对Package.json文件等进行重新编辑，并完成安装。
生成地址表单
首先，在浏览器中打开Angular Material Schematics的页面https://material.angular.io/guide/schematics。
然后显示地址格式示意图部分，并且在命令行输入该命令行。
使用Angular Material的命令，生成一个名为的地址表单组件。
复制。
返回VS Code，将其粘贴到命令行中。
组件名称可以自行适当设置。
在这里，我将组件名称设为myaddress。
这个过程很快就会完成。
看到源代码后，可以看到新生成了一个名为myaddress的目录。
然后打开该目录中的myaddress.component.ts文件，复制选择器名称。
在这里，它被称为app-myaddress。
接下来，打开app.component.html文件，在最后一行粘贴该标签作为标记。
进一步将默认的HTML文档全部注释掉。
我会保存这个文件。
然后，在终端窗口中输入”ng s -o”，启动本地服务器并打开浏览器。
请在显示的“发货信息”页面输入公司名称、姓名、地址等信息。
当最后点击提交按钮时，将会弹出一个弹窗。
已生成地址表单的模版。
没问题。
请用中文进行以下句子的同义替换，只需提供一种选项：
“Can you please show me the way to the nearest train station?”
参考资料
-
- “Schematics”,
-
- https://material.angular.io/guide/schematics
-
- “Angular Update Guide”,
-
- https://update.angular.io/
-
- “Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more”,
-
- https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c
-
- “Angular5,Angular6,Angular7 Custom Library: Step-by-step guide”,
-
- https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/
-
- “Angular5,Angular6,Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド”,
- https://www.udemy.com/angular5-l/
