提姆寫程式

0%

Angular 筆記 - radio 預設選項實作

發表於 分類於 Disqus：
預設顯示預選選項

angular

目前遇到一個需求是在頁面渲染後，會先預設帶入 radio 的選項。

建立 input

radio.html

建立兩個 radio 選項，

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
<form [formGroup]="loginForm">
  <div class="form-radio-inline">
    <input
      formControlName="lang"
      class="form-check-input"
      type="radio"
      name="lang"
      id="lang-tc"
      value="zh-tw"
      [attr.checked]="checked"
      [checked]="vm.isTw"
      (click)="setLang('zh-tw')"
    />
    <label class="form-check-label" for="lang-tc"> 繁體中文 </label>
  </div>
  <div class="form-radio-inline">
    <input
      formControlName="lang"
      class="form-check-input"
      type="radio"
      name="lang"
      id="lang-en"
      value="en"
      (click)="setLang('en')"
      [checked]="!vm.isTw"
    />
    <label class="form-check-label" for="lang-en"> English </label>
  </div>
</form>

設定預設選項

因為使用 form 表單，所以就要引入相對的組件

1
2
3
4
5
6
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from "@angular/forms";

預設變數先寫好，

1
2
isTw: boolean = true;
checked: boolean = true;

建立 Form 與建構式引入 FormBuilder 方法。
預設帶入的是繁體中文的值 zh-tw。
將點擊事件的參數帶入，並且賦予語言選項的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
loginForm: FormGroup = new FormGroup({
   lang: new FormControl("zh-tw")
 });

 constructor(private formBuilder: FormBuilder) {}

 ngOnInit() {
   this.createForm();
 }
 createForm() {
   this.loginForm = this.formBuilder.group({
     lang: ["zh-tw", Validators.required]
   });
 }

 setLang(lang: string) {
   this.isTw = lang === "zh-tw";
 }

Demo https://stackblitz.com/edit/angular-ivy-bgkczh?embed=1&file=src/app/app.component.html