how to make dropdown without warning or ngModel in angular?

3
votes

could you please tell me how to make dropdown without warning or ngModel in angular? I am getting warning this

enter image description here

code

https://stackblitz.com/edit/angular-vsjbr9?file=src%2Fapp%2Fapp.component.ts

how I will acheive the same thing without ngModel

  <form novalidate [formGroup]="searchForm" class="calform">
      <section class="col-sm-6 bg-white  pl-20 pr-20">
        <div class="form-group col-sm-8 pl-0">
          <label class="field-title mb-5">Circle<span class="color-red fontWt">&nbsp;*</span></label>
          <div class="select width-170 mr-20">
            <select formControlName="circle"  [(ngModel)]="selectedCircle">
              <option class='option'
                      *ngFor='let o of circle'
                      [disabled]="o.value==''"
                      [value]="o.value">{{o.option}}</option>
            </select>
          </div>
        </div>
      </section>
    </form>

I want first option is selected by default and user never select first option in my example ("select from list never selected")

1
javascriptangularangular-reactive-forms

1 Answers

0
votes

Something like this? https://stackblitz.com/edit/angular-zxeysz?file=src%2Fapp%2Fapp.component.ts

I've removed the ngmodel. You are already using a formgroup so ngmodel is not needed.

Then in your ts file , you do create the 'circle' control, but you assigned null value. I've altered it to empty string ''. This way the the select is pre-checked with the '' value.