简介
Material Design 是由 Google 推出的一种设计语言，旨在创造简洁、直观、有层次感的界面。在前端开发中，我们经常需要使用表单控件来收集数据。使用 Material Design 为我们的表单添加一些动画效果，可以增强用户交互性和体验，提高用户对网站的满意度。
在本文中，我们将使用 Angular 和 Angular Material，构建一个带有 Material Design 滑块的表单。
准备工作
在使用 Angular Material 的组件之前，我们需要引入相应的依赖包。我们可以在 package.json 文件中添加以下依赖项：
"dependencies": {
"@angular/material": "^11.2.1",
"@angular/cdk": "^11.2.1",
}然后，我们需要在 app.module.ts 文件中导入这些模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- ---------------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
------------
------------------------
----------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -现在我们已经准备好使用 MatSliderModule 了。
实现表单
在我们开始编写代码之前，我们需要做一些规划。在本示例中，我们将创建一个简单的表单，其中包含一个输入框和一个滑块。我们稍后将使用 ngModel 指令来绑定表单元素，以便我们可以获取和使用表单数据。
我们将在 app.component.html 文件中编写 HTML 代码：
-- -------------------- ---- -------
------
----------------
------ -------- ----------------- ------------------------ --
-----------------
----------- ------- --------- -------- ---------- ---------------------------------------
------- --------------------------------
-------在这里，我们呈现了一个简单的表单，包括一个带有标签的文本输入框和一个 Material Design 滑块。注意我们使用了 [(ngModel)] 指令来绑定表单元素，并且为滑块添加了 thumbLabel 属性，以在滑块上显示数值。
实现提交表单
我们的表单已经创建好了，下面我们需要编写 onSubmit() 方法，在用户提交表单时获取表单数据并将其发送到服务器。
在 app.component.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
----------- ------ - ---
------------ ------ - --
---------- -
----------------- ---------------------
----------------- ----------------------
-
-在 onSubmit() 方法中，我们打印出表单数据。现在我们已经完成了表单的实现和提交。
总结
本文中，我们使用 Angular 和 Angular Material 创建了一个 Material Design 表单，并且添加了一个滑块。我们还看到了如何使用 ngModel 指令来绑定表单元素并获取表单数据，并且学习了如何提交表单数据。希望这篇文章能够帮助你更深入地了解如何使用 Angular 以及 Angular Material 来创建出创新的前端界面。
代码附录
app.component.html
-- -------------------- ---- -------
------
----------------
------ -------- ----------------- ------------------------ --
-----------------
----------- ------- --------- -------- ---------- ---------------------------------------
------- --------------------------------
-------app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
----------- ------ - ---
------------ ------ - --
---------- -
----------------- ---------------------
----------------- ----------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8be8548841e9894520283