IONIC 3验证表格出错

时间:2018-03-11 11:54:43

标签: ionic3 angular5 angular2-formbuilder

我有两个问题: 1:验证要求仅显示我是否在字段中单击2次,在第一次显示有效,并在第二次显示具有ng-invalid类的无效字段(正确但在第一次模糊的字段事件中显示)。 /> 2:我正在使用一种方法在字段中设置值,但验证仍然是无效的。

home.ts

@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
addressForm: FormGroup;
constructor(public navCtrl: NavController,
            public navParams: NavParams,
            public formBuilder: FormBuilder) {
    this.addressForm = this.formBuilder.group({
        address:    [ '', [ Validators.required ]]
    });

}  

getGeolocation(form) {
    console.log(form.value);
    this.addressForm.setValue({'address':'Some word'})
}

saveGeoLocation(form) {
    console.log(form.value)
}
}

home.html的

<form novalidate [formGroup]="addressForm" >
    <ion-list no-border padding no-margin>
        <ion-item no-padding>
            <ion-label stacked>{{ 'ADDRESS' | translate }}</ion-label>
            <ion-input formControlName="address" name="address" placeholder="{{ 'ADDRESS_EXAMPLE' | translate }}" text-wrap></ion-input>
        </ion-item>
        <br />
        <button type="button" ion-button color="color-green" block clear (click)="getGeolocation(addressForm)" >
            <ion-icon name="navigate" icon-start></ion-icon>
             {{ 'MY_LOCATION' | translate }}
        </button>
    </ion-list>
</form>

截图 Link

感谢您的帮助:))

@edit 我忘了展示我的工作场所 here my environment setup

0 个答案:

没有答案