Angular 13 輸入無線電檢查條件不工作

Question

我保存在 localstorage selectedKitchenId 中，並選中或 selectedKitchenId === kitchen.id，如果為 true 則選擇收音機。 不明白為什么不工作檢查條件，我嘗試強標簽顯示相同的檢查一切正常。 告訴我可能是什么原因

        <div class='row'>
          <div *ngFor="let kitchen of kitchenTypes" class='col-lg-3'>

            <div class="form-check form-check-inline">
              <label class="form-check-label" for="{{kitchen.id}}">
                <div class='kitchenTypeBg'>
                  <img src='{{kitchen.src}}' alt='' class='p-1 align-middle'>
                </div>
              </label>
              <input
                [checked]="selectedKitchenId === kitchen.id"
                formControlName="kitchenType"
                [value]='kitchen.id'
                class="form-check-input" type="radio" id="{{kitchen.id}}"
              >
              <strong>{{selectedKitchenId === kitchen.id}}</strong>
            </div>
          </div>
        </div>

Answer 1

 <form #f="ngForm" (ngSubmit)='goToNextStep(f.form)'> <div *ngIf="submitted && f.invalid"> <span class='text-center'>Required form</span> </div> <div class='row'> <div *ngFor="let kitchen of kitchenTypes" class='col-lg-3'> <div class="form-check form-check-inline"> <label class="form-check-label" [for]="kitchen.id"> <div class='kitchenTypeBg'> <img [src]='kitchen.src' alt='' class='p-1 align-middle'> </div> </label> <input name="kitchenType" [checked]="selectedKitchenId === kitchen.id" [value]='kitchen.id' class="form-check-input" type="radio" [id]="kitchen.id" > <strong>{{selectedKitchenId === kitchen.id}}</strong> </div> </div> </div> <div class="d-grid"> <button type="submit" class="btn-block btn btn-outline-light buttonNext mx-auto mt-4 w-50"> Tęsti </button> <button [routerLink]="['/']" class='btn btn-block mx-auto buttonBack'> <i class="bi bi-arrow-left"></i> Grižti </button> </div> </form>

模板驅動就是這么簡單

為您修復了一些最佳實踐

要獲取值，只需在 TS 文件上使用：

goToNextStep(form) {
   const {kitchenType} = form.values
}

Answer 2

它對我有用，表單控件傳遞值。 這里是如何完成的鏈接

    // Get selected Kitchen id
    this.selectedKitchenId =
      this.persistenceService.get('selectedKitchenId') ?? null;


  initializeForm(): void {
    this.form = this.formBuilder.group({
      kitchenType: new FormControl(this.selectedKitchenId, Validators.required),
    });
  }