代码之家 › 专栏 › 技术社区 › chuckd

添加FormControlName会使默认值以角度消失在窗体的下拉列表中

angular7 typescript twitter-bootstrap html

1

chuckd · 技术社区 · 6 年前

this.registerform=this.fb.group({
电子邮件:'''[validators.required,validators.email]],

月:'',验证程序。必需],
年份:'',验证程序。必需],
国家:''',验证程序。必需],
},。{
});<select[ngclass]=“is-invalid”:registerform.get(“month”).errors&registerform.get(“month”).dirty”class=“form control”id=“inputstate1”formcontrolname=“month”>
<选项>一月</选项>
<选项>4月</选项>
<选项>六月</选项>
<选项>8月</选项>
<选项>11月</选项>
</选择>
</DIV>>=
这就是我看到的








移动它,它会显示但不能正确验证,因为它无法绑定。





this.registerForm = this.fb.group({
  gender: ['male'],
  email: ['', [Validators.required, Validators.email]],
  username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],

  month: ['', Validators.required],
  day: ['', Validators.required],
  year: ['', Validators.required],
  city: ['', Validators.required],
  country: ['', Validators.required],
  password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
  confirmPassword: ['', Validators.required]
}, {
  validator: this.passwordMatchValidator
});
<div class="form-group col-4 col-sm-4 col-md-4">
  <select [ngClass]="{'is-invalid': registerForm.get('month').errors && registerForm.get('month').dirty}" class="form-control" id="inputState1" formControlName="month">
    <option disabled hidden selected>Month</option>
    <option>Jan</option>
    <option>Feb</option>
    <option>Mar</option>
    <option>Apr</option>
    <option>May</option>
    <option>Jun</option>
    <option>Jul</option>
    <option>Aug</option>
    <option>Sep</option>
    <option>Oct</option>
    <option>Nov</option>
    <option>Dec</option>
  </select>
  <div class="invalid-feedback" *ngIf="registerForm.get('month').dirty && registerForm.get('month').hasError('required')">Month required</div>
</div>




这就是我看到的







现在当我移除





我看到这个了

1 回复 | 直到 6 年前

1

abarrenechea 6 年前

<form [formGroup]="registerForm">
  <div>
  <input formControlName="email">
  </div>
  <div>
  <select class="form-control" formControlName="month">
      <option value="" hidden selected>Select a month</option>
      <option value="1">Jan</option>
      <option value="2">Feb</option>
  </select>
  </div>
  </form>

https://angular-reactive-form-dropdown.stackblitz.io