Question

这是我的TS代码：

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

  form: FormGroup;

  constructor() { }

  datas = [{id:1, lib: "London"}, {id:2, lib: "Madrid"}, {id: 3, lib: "Berlin"}]

  myCity = "London";

  ngOnInit() {
    this.form = new FormGroup({
      city: new FormControl()
    })
  }

}

这是我的模板：

<form [formGroup]="form" (ngSubmit)="go()">
  <select name="" formControlName="city">
    <option *ngFor="let data of datas" [value]="data.id" [selected]="myCity == data.lib">{{data.lib}}</option>
  </select>
  <button type="submit()">click</button>
</form>

我可以看到我的表单可以使用我可以选择的3个值正常工作。但是默认情况下，我应该看到“伦敦”，但是什么也没有出现。默认情况下，我的值为null。

我不明白为什么。我的代码似乎正确

谢谢

Answer 1

完全删除selected属性并在创建表单的地方修改代码：

city: new FormControl('1') // London has id 1

Answer 2

您需要删除formControlName="city"，您的代码才能像魅力一样工作。原因是您绑定了两次，一次绑定到formControlName="city"，另一次绑定到selected属性。

<form [formGroup]="form" (ngSubmit)="go()">
  <select name="">
    <option *ngFor="let data of datas" [value]="data.id" [selected]="myCity == data.lib">{{data.lib}}</option>
  </select>
  <button type="submit()">click</button>
</form>

Working Example

角形式：[选定的]不起作用

2 个答案: