Как добавить к реактивной форме в приложении Ioni c / Angular? - PullRequest
Новая
       8

Как добавить к реактивной форме в приложении Ioni c / Angular?

0 голосов
/ 20 апреля 2020

Я пытаюсь добавить <ion-radio-group>, содержащий 2 <ion-radio>, в реактивную форму в моем приложении Ioni c / Angular.

Ниже я инициализирую форму и создаю метод выполняется, когда я отправляю форму: 

ngOnInit() {
    this.form = new FormGroup({
      userType: new FormControl(null, {
        updateOn: 'blur',
        validators: [Validators.required]
      }),
}

onSubmit() {
    if (this.form.invalid) {
      console.log('form invalid');
      return;
}

Здесь я даю <ion-radio-group> a formControlName: 

<form [formGroup]="form">
    <ion-radio-group formControlName="userType">
        <ion-row>
                <ion-col size-sm="3" offset-sm="3">
                    <ion-label>User Type:</ion-label>
                </ion-col>
        </ion-row>
        <ion-row>
            <ion-col size-sm="3" offset-sm="3">
                <ion-item lines="none">
                    <ion-label>Customer</ion-label>
                    <ion-radio value="customer"></ion-radio>
                </ion-item>
            </ion-col>
            <ion-col size-sm="3">
                <ion-item lines="none">
                    <ion-label>Mechanic</ion-label>
                    <ion-radio value="mechanic"></ion-radio>
                </ion-item>
            </ion-col>
        </ion-row>
    </ion-radio-group>
    <ion-button color="primary" (click)="onSubmit()">Submit</ion-button>
</form>

Когда я выполняю onSubmit(), форма недействительна зарегистрировано на консоли.

Может кто-нибудь подсказать, пожалуйста, как я могу устранить эту ошибку?

Также - я попробовал приведенное ниже изменение, но теперь я получаю это сообщение об ошибке, когда загрузка страницы:

Нет доступа к значению для управления формой с именем: 'userType' 

<ion-row radio-group formControlName="userType">
    <ion-item>
      User Type
    </ion-item>
    <ion-col>
       <ion-item>
        <ion-label>Customer</ion-label>
        <ion-radio value="customer"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
       <ion-item>
        <ion-label>Mechanic </ion-label>
           <ion-radio value="mechanic"></ion-radio>
           </ion-item>
        </ion-col>
</ion-row>
...