angular 9.Stop the page and display erors

Question

angular 9 ui have a dropdown state and city defualt value state id=-1 and city=-1 ,on buton click ngform validation verify f.valid and city ='-1' then display erors and stateid='-1' display erors

[ngClass]="{'is-valid': f.submitted && cityID!=='-1', 'is-invalid' : f.submitted && reportingRangeTypeID=='-1'}"

(ngSubmit)="f.form.valid ? ButtonClick() :                         
                          (!cityID.valid && showErrorAlert('Password is required', 'Please enter a valid password'))">

<select *ngIf="model" [(ngModel)]="model.cityid" required class="form-control" #cityid="ngModel"  id="cityID" name="rcityID"
                    [ngClass]="{'is-valid': f.submitted && cityID==='-1', 'is-invalid' : f.submitted && !city=='-1'}"
                    ">
              <option *ngFor="let a of model.cities" [ngValue]="a.value">{{ a.text}} </option>
            </select>

onbuton click form is true even cityid  is -1.