英文:
How do I initialize mdb tooltips on Angular with Typescript?
问题
我正在使用Angular项目中的mdb，并且想要在我的密码输入上显示一个提示，向用户展示限制条件。
我尝试在HTML输入标签中添加data-mdb-toggle="tooltip"和紧随其后的title，但我发现mdb的提示需要初始化。我不知道如何在TypeScript中做到这一点，以下是我的.ts文件：
import { Component, OnInit } from '@angular/core';import { FormControl, FormGroup, Validators } from '@angular/forms';@Component({selector: 'app-register',templateUrl: './register.component.html',styleUrls: ['./register.component.scss']})export class RegisterComponent implements OnInit {registerForm!: FormGroup;constructor() {}ngOnInit(): void {this.registerForm = new FormGroup({nome: new FormControl(null, Validators.required),cognome: new FormControl(null, Validators.required),team: new FormControl(null, Validators.required),genere: new FormControl(null, Validators.required),anno: new FormControl(null, [Validators.required, Validators.max(2005), Validators.min(1964)]),email: new FormControl(null, [Validators.required, Validators.email]),password: new FormControl(null, [Validators.required,Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')]),})}onSubmit() {console.log(this.registerForm);}}
如果需要进一步的帮助，请随时提出。
英文:
I'm using mdb on my angular project and I want to show a tooltip on my password input to show the restriction to the user.
I tried putting data-mdb-toggle="tooltip" and the title next to it in the html input tag but I saw that mdb tooltips have to be initialised. I don't now how to do it with Typescript, here's my .ts file:
import { Component, OnInit } from '@angular/core';import { FormControl, FormGroup, Validators } from '@angular/forms';@Component({selector: 'app-register',templateUrl: './register.component.html',styleUrls: ['./register.component.scss']})export class RegisterComponent implements OnInit {registerForm!: FormGroup;constructor() {}ngOnInit(): void {this.registerForm = new FormGroup({nome: new FormControl(null, Validators.required),cognome: new FormControl(null, Validators.required),team: new FormControl(null, Validators.required),genere: new FormControl(null, Validators.required),anno: new FormControl(null, [Validators.required, Validators.max(2005), Validators.min(1964)]),email: new FormControl(null, [Validators.required, Validators.email]),password: new FormControl(null, [Validators.required,Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')]),})}onSubmit() {console.log(this.registerForm);}}
答案1
得分: 0
请尝试以下内容，希望这对您有用
在终端中轻松为您的项目安装 MDB ANGULAR UI KIT，请键入以下命令：
npm i mdb-angular-ui-kit
然后，在 app.module.ts 中添加单独的 MDB 模块导入，以使用特定的组件。例如，使用工具提示：
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';@NgModule({...imports: [MdbTooltipModule],...})
然后在 HTML 模板中：
<p class="mb-0">鼠标悬停在链接上以查看<a href="#" mdbTooltip="Hi! I'm tooltip" #tooltip="mdbTooltip">tooltip</a></p>
英文:
Please try below hope this will work for you
Install MDB ANGULAR UI KIT in your project easily type the following command in the terminal:
npm i mdb-angular-ui-kit
then Add imports of individual MDB modules to the app.module.ts to use specific components. For example use tooltip:
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';…@NgModule ({...imports: [MdbTooltipModule],...})
Then in html template
<p class="mb-0">Hover the link to see the<a href="#" mdbTooltip="Hi! I'm tooltip" #tooltip="mdbTooltip">tooltip</a></p>
答案2
得分: 0
使用以下命令安装 UI 组件库：npm i mdb-angular-ui-kit
在您的 app.module.ts 文件中导入 MdbTooltipModule，如下所示：
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';@NgModule({...imports: [MdbTooltipModule,]...})
确保在您的样式表中导入 mdbstylesheet：
// MDB SCSS@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
您的 HTML 模板代码如下：
<amdbTooltip="Tooltip on top"placement="top">Tooltip on top</a>
英文:
Install ui kit using this command: npm i mdb-angular-ui-kit
Import MdbTooltipModule into your app.module.ts file like below:
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';@NgModule({...imports: [MdbTooltipModule,]...})
Make sure you import mdbstylesheet in your stylesheet
// MDB SCSS@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
Your HTML template code like below:
<amdbTooltip="Tooltip on top"placement="top">Tooltip on top</a>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论