时间戳

首页 > 解决方案 > 角度验证出错

javascript - 角度验证出错

问题描述

我有一个角度应用程序，其中包含模板中的一些验证。当我尝试运行这个应用程序时，我得到了很多错误。我的 app.component.html 如下所示：

     <html>
    <div class="container">
      <p class="jumbotron display-4">Open Account</p>
      <form >
    <div class="form-group">
      <label for="name">First Name</label>
      <input type="text" class="form-control" id="name" ngModel name="name"  #name="ngModel" maxlength="30" minlength="2" required>
             <div *ngIf="name.invalid && (name.dirty || name.touched)"
        class="alert alert-danger">
      <div *ngIf="name.errors.required">
        First Name is required.
      </div>
      <div *ngIf="name.errors.minlength">
        First Name cannot be more than 30 characters long.
      </div>
      <div *ngIf="name.errors.minlength">
       First Name must be at least 2 characters long.
      </div>
    </div>
    </div>
    
    <div class="form-group">
      <label for="lname">Last Name</label>
      <input type="text" class="form-control" id="lname"
             ngModel name="lname"  #lname="ngModel" maxlength="30" minlength="2" required>
             <div *ngIf="lname.invalid && (lname.dirty || lname.touched)"
        class="alert alert-danger">
      <div *ngIf="lname.errors.required">
        Last Name is required.
      </div>
      <div *ngIf="lname.errors.minlength">
        Last Name cannot be more than 30 characters long.
      </div>
      <div *ngIf="lname.errors.minlength">
        Last Name must be at least 2 characters long.
      </div>
    </div>
    </div>
    
    <div class="form-group">
      <label for="phone">Phone number</label>
      <input type="text" class="form-control" id="phone"
             ngModel name="phone"  #phone="ngModel" maxlength="10" minlength="10" required>
             <div *ngIf="phone.invalid && (phone.dirty || phone.touched)"
        class="alert alert-danger">
      <div *ngIf="phone.errors.required">
        Phone number is required.
      </div>
      <div *ngIf="phone.errors.minlength">
        Phone number must be of 10 digits long.
      </div>
    </div>
    </div>
    
    <div class="form-group">
      <label for="address">Address</label>
      <input type="text" class="form-control" id="address"
             ngModel name="address"  #address="ngModel" minlength="2" required>
             <div *ngIf="address.invalid && (address.dirty || address.touched)"
        class="alert alert-danger">
      <div *ngIf="address.errors.required">
       Address is required.
      </div>
      <div *ngIf="address.errors.minlength">
        Address length must be at least 2 characters long.
      </div>
    </div>
    </div>
    
    <div class="form-group">
      <label for="address">City</label>
      <input type="text" class="form-control" id="city"
             ngModel name="city"  #city="ngModel" required>
             <div *ngIf="city.invalid && (city.dirty || city.touched)"
        class="alert alert-danger">
      <div *ngIf="city.errors.required">
       City field is required.
      </div>
    </div>
    </div>
    
    <div class="form-group">
      <label for="address">State</label>
      <input type="text" class="form-control" id="state"
             ngModel name="state"  #state="ngModel" required>
             <div *ngIf="state.invalid && (state.dirty || state.touched)"
        class="alert alert-danger">
      <div *ngIf="state.errors.required">
       State field is required.
      </div>
    </div>
    </div>
    
    <div>
      <button type="submit" class="btn btn-primary w-25 mx-auto d-block">Submit</button>
    </div>
    </form>
    </div>
    </html>

我的浏览器显示这些错误：

cannot Get/ 加载资源失败：服务器响应状态为 404（未找到）

[![失败][1]][1]

在我的控制台中，我看到以下错误：

Error: src/app/app.component.html:11:27 - error TS2531: Object is possibly 'null'.

11   <div *ngIf="name.errors.required">
                             ~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:14:27 - error TS2531: Object is possibly 'null'.

14   <div *ngIf="name.errors.minlength">
                             ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:17:27 - error TS2531: Object is possibly 'null'.

17   <div *ngIf="name.errors.minlength">
                             ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:29:28 - error TS2531: Object is possibly 'null'.

29   <div *ngIf="lname.errors.required">
                              ~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:32:28 - error TS2531: Object is possibly 'null'.

32   <div *ngIf="lname.errors.minlength">
                              ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:35:28 - error TS2531: Object is possibly 'null'.

35   <div *ngIf="lname.errors.minlength">
                              ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:47:28 - error TS2531: Object is possibly 'null'.

47   <div *ngIf="phone.errors.required">
                              ~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:50:28 - error TS2531: Object is possibly 'null'.

50   <div *ngIf="phone.errors.minlength">
                              ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


[91mError: src/app/app.component.html:62:30 - error TS2531: Object is possibly 'null'.

62   <div *ngIf="address.errors.required">
                                ~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:65:30 - error TS2531: Object is possibly 'null'.

65   <div *ngIf="address.errors.minlength">
                                ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:77:27 - error TS2531: Object is possibly 'null'.

77   <div *ngIf="city.errors.required">
                             ~~~~~~~~

  src/app/app.component.ts:5:16
    5m   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.html:89:28 - error TS2531: Object is possibly 'null'.

89   <div *ngIf="state.errors.required">
                              ~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

app.component.ts:-

import { Component,ViewChild,OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'val';
}

- - - - - - - - - - - - - X - - - - - - - - - - - - - - - - - -X - - - - - - - - - -

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validate</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

标签： javascripthtmlcssangular

解决方案

在您的索引 html 中，您必须看到一个<base>标签。改变<base href="/"> to <base href="./">

推荐阅读