Как получить значение FormControl и передать его в качестве параметра функции? - PullRequest
0 голосов
/ 30 августа 2018

У меня есть следующий шаблон:

 <form [formGroup]="firstFormGroup"  #formone="ngForm">
        <ng-template matStepLabel>Saisir l'url </ng-template>
        <mat-form-field fxFlex>
            <input matInput placeholder="Url" formControlName="subscriptionUrl" id="subscriptionUrl" required>
        </mat-form-field>


        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div>
                        <button type="button" mat-raised-button (click)="check()">
                            Calculer
                        </button>
                    </div>


                </div>
                <div class="row">
                    <div *ngIf="priceFound != 0">
                        <div class="col-md-6 grid-margin stretch-card">
                            <mat-form-field fxFlex>
                                <input matInput placeholder="trouvé" formControlName="Found" id="priceFound" required>
                                {{Found}}
                            </mat-form-field>
                        </div>
                        <button type="button" mat-raised-button matStepperNext>Valider  et passer à
                            l'étape suivante
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>

и следующий машинописный текст:

@Component({
selector: 'stepper-overview-example',
templateUrl: './souscription.component.html',
styleUrls: ['./souscription.component.scss'],})

export class SouscriptionComponent implements OnInit {
isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
subscriptionUrl: FormControl;
subscr: Subscription;
priceFound: number;

constructor(private _formBuilder: FormBuilder, public router: Router, private userService: ClientApi, private souscriptionApi: SubscriptionApi) {

    this.subscr = new Subscription();
    this.firstFormGroup = this._formBuilder.group({
        subscriptionUrl: new FormControl('', [ Validators.required]),
        priceFound: new FormControl('')
    });
    this.secondFormGroup = this._formBuilder.group({
        subscriptionName: new FormControl('', [Validators.required]),
        subscriptionDesc: new FormControl('')
    });
}

ngOnInit() {
    }

check() {
    console.log('this.subscriptionUrl.value' + this.subscriptionUrl.value);
    this.souscriptionApi.getP(this.firstFormGroup.get('subscriptionUrl').value)
        .subscribe((Resultat) => {
                this.Found = Resultat.result;
            },
            (error) => {
                console.log(error);
            }
        );
}}

Устанавливая значение в элементе управления формы с именем subscriptionUrl , я не могу получить его значение на стороне машинописи. Я хотел бы получить значение этого поля и передать его в качестве параметра стороне сценария типа функции для его обработки.

Ошибка:

SouscriptionComponent.html:14 ERROR TypeError: Cannot read property 'value' of undefined

Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Чтобы прокомментировать мой комментарий: вы объявляете переменную

subscriptionUrl: FormControl;

Но ты никогда не будешь использовать его снова. Не раз ты пишешь

this.subscriptionUrl = ...;

Это означает, что ваша переменная undefined, следовательно, не содержит value.

Чтобы получить значение, либо сделайте это

this.firstFormGroup.get('subscriptionUrl').value;

Или добавьте это, как только ваши формы будут объявлены

this.subscriptionUrl = this.firstFormGroup.get('subscriptionUrl');

И чтобы ответить вам: НЕТ , создание формы не создает переменных в вашем компоненте. Чтобы создать переменную, вы должны явно указать ее с помощью

this.subscriptionUrl = ...;
0 голосов
/ 30 августа 2018

Вы не можете получить это. Потому что этот оператор subscriptionUrl: FormControl не делает ничего, кроме объявления типа. Так что this.subscriptionUrl не определено, и вы можете прочитать свойство 'value' из него. Опишите свою цель и создайте https://stackblitz.com/edit/angular-p38ksf, чтобы ее было легко понять.

...