Question

我有以下模板：

 <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

感谢您的帮助。

Answer 1

您无法获得它。因为该语句subscriptionUrl: FormControl除了类型声明外没有其他作用。因此this.subscriptionUrl是未定义的，您可以从中读取属性“ value”。描述您的目标并创建一个https://stackoverflow.com/a/52096688/1234825，以使其易于理解。

Answer 2

跟进我的评论：您声明一个变量

subscriptionUrl: FormControl;

但是您永远不会再使用它。一次写

this.subscriptionUrl = ...;

这意味着您的变量为undefined，因此不包含value。

要获取值，请执行以下操作

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

或者在声明表单后添加

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

要回答您：否，创建表单不会实例化组件中的变量。要实例化变量，您必须使用

明确声明它

this.subscriptionUrl = ...;

如何从中获取FormControl的值并将其作为参数传递给函数？

2 个答案: