Question

我有一个不设置select值的简单组件，而是用HTML编写值

<select name="select1" ngModel id="s1" class="form-control">
  <option value="Item 1">Item 1</option>
  <option value="Item 2">Item 2</option>
  <option value="Item 3" selected>Item 3</option>
  <option value="Item 4">Item 4</option>
  <option value="Custom Item 1">Custom Item 1</option>
</select>

所选选项的值为Item 3，但打开页面时不会显示此值。没有ngModel它会显示出来。当我按下重置按钮（只是带有type="reset"的输入）时，也会显示它。

我在复选框，单选按钮和简单文本输入方面也存在同样的问题，但在这种情况下，我使用checked显示单选按钮和复选框的默认值，并设置value="default value"以防万一文本输入。

这是ts文件。

import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  @Input() show: boolean;
  @Output() hideFiltersEvent = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  onSubmit(aForm: NgForm){
    console.log(aForm);
  }
  onHideFilters(){
    this.hideFiltersEvent.emit();
  }
}

此文件中有一些方法，但它们与设置或重置表单控件无关。

如果可能的话，如何在不删除ngModel的情况下显示表单控件的默认值，以及为什么会发生这一切？

Answer 1

在组件类中设置默认值

end entity identifier ;

使用模板中的ngModel将该值绑定到输入：

currentValue = "Item 3";

模板打开时，启动当前值将显示为默认值。

Answer 2

对于单选按钮，我必须使用与ngModel的双向绑定和包含checked按钮值的变量。每个单选按钮都必须具有这样的绑定。

<input type="radio" name="radio1" [(ngModel)]="opt1" class="form-check-input" value="Option 1"/> Option 1

此处opt1是一个字符串"Option 2"，该按钮未选中，但会检查value Option 2 {{}}}的类似单选按钮。

对于复选框，我必须这样做，但变量应该有一个布尔值，true - checked，false - unchecked。

使用ngModel时不显示所选值

2 个答案: