0

我使用 angular-cli 创建了我的应用程序。我尝试验证我的表格。它在 html 文件中： 

<div class="container">
    <h1>Create url-shortener</h1>
    <form [formGroup]="createUrlForm">
        <div class="form-group"
             [ngClass]="{'has-error':!createUrlForm.controls['full_url'].valid && createUrlForm.controls['full_url'].touched}">
            <label><b>Full url</b></label>
            <input type="text" class="form-control"
                   [formControl]="createUrlForm.controls['full_url']"
                   placeholder="Paste a link to shorten it">
            <div
                *ngIf="createUrlForm.controls['full_url'].hasError('required') && createUrlForm.controls['full_url'].touched"
                class="alert alert-danger">Input url.
            </div>
            <div
                *ngIf="createUrlForm.controls['full_url'].hasError('pattern') && createUrlForm.controls['full_url'].touched"
                class="alert alert-danger">Incorrect url.
            </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success" (click)="create(createUrlForm.value)"
                    [disabled]="!createUrlForm.valid">Shorten
            </button>
            <a class="btn btn-danger" [routerLink]="['/']">Back</a>
        </div>
    </form>
</div>

并创建了组件：

import { Component } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";

import { Url } from "../shared/models/url.model";
import { UrlService } from "../shared/services/url.service";

@Component({
  selector: 'app-create-url',
  templateUrl: './create-url.component.html',
  styleUrls: ['create-url.component.scss']
})
export class CreateUrlComponent {

  createUrlForm: any;

  constructor(
      private formBuilder: FormBuilder,
      private urlService: UrlService) {
      this.createUrlForm = formBuilder.group({
      "url": ['', [Validators.required, Validators.pattern('https?://.+')]]
    })
  }

  create(url: Url) {

  }

}

当我单击按钮时，我在控制台中看到一个错误：
ERROR TypeError: Cannot read property 'valid' of undefined

我在stackoverflow上寻找答案，但找不到。我在任何地方都创建了错误并花费了大量时间。

4

0 回答 0