Vue

Angular 表單與按鈕的綁定

表單與按鈕的綁定

to-do.component.html

表單上[(ngModel)]="newTask
按鈕上(click)="addTasks()" 函式的綁定
1
2
3
4
5
6
7
8
<div class="forms">
  <div class="input-group">
      <input type="text" class="form-control"
     [(ngModel)]="newTask"
      />
      <button class="btn btn-primary" (click)="addTasks()">Add</button>
  </div>
</div>
在to-do.component.ts 如果使用表單綁定 [(ngModel)] 要引入FormsModule
  • 引入FormsModuleimport { FormsModule } from '@angular/forms'
  • importsFormsModule
  • export class ToDoComponent 內的資料定義與函式
    tasks : string[] =[];
    newTask: string = "";//表單綁定
    isAvalible : boolean = false;
    addTasks()函式綁定在Button
    addTasks()函式的邏輯判斷
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component } from '@angular/core';
+ import { FormsModule } from '@angular/forms'
@Component({
  selector: 'app-to-do',
  standalone: true,
  imports: [
+     FormsModule
  ],
  templateUrl: './to-do.component.html',
  styleUrl: './to-do.component.scss'
})

export class ToDoComponent {
  Title: string = 'To Do Lists';
  imageLink: string = "https://cdn-icons-png.flaticon.com/512/4697/4697260.png";
+   tasks: string[] = [];
+   newTask: string = "";//表單綁定
    isAvalible : boolean = false;
+   addTasks() {
+     const vm = this;
      //如果表單左右有空格就清除，將表單數據塞入陣列中，並且將 表單清空
      if (vm.newTask.trim() != null) {
        vm.tasks.push(vm.newTask)
        vm.newTask="";
        vm.isAvalible = true;
      }
      console.log(vm.tasks)
    }
}

安裝primeng

PrimeNG 是一套豐富的 Angular 開源 UI 元件。造訪PrimeNG 網站以取得互動式簡報、綜合文件和其他資源。

1
npm install --save primeng

全局引入 MatButtonModule與ButtonModule

在app.component.ts
  • 引入MatButtonModule
  • 引入ButtonModule
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
+ import {MatButtonModule} from '@angular/material/button';
+ import { ButtonModule } from 'primeng/button';
import { ToDoComponent } from './components/to-do/to-do.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
+    MatButtonModule,
+    ButtonModule,
    ToDoComponent,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'tode_project';
}

啟動 
1
ng serve
點擊函式觀看 表單與按鈕綁定函式的執行 更正函式