Question

我有一个非常基本的表单，包括输入字段和按钮。我正在尝试使用angular2验证器在输入字段中输入除数字以外的任何内容时显示错误消息，并在输入字段无效或为空时禁用提交按钮。出于某种原因，错误消息显示无论输入什么...任何想法我做错了什么？

我的代码：

app.component.html：

<div class="row">
<div class="col-md-4 col-md-push-4">
<form [formGroup]="barcodeForm"  role="form" (ngSubmit)="submitBarcode(barcode)" >
    <div class="form-group">        
        <input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" [formControl]="barcodeForm.controls['barcode']" [(ngModel)]="barcode" name="barcode" #focusInput>
        <div [hidden]="barcode.valid || barcode.pristine" class="alert alert-danger">A barcode can only consist of numbers (0-9)...</div>
    </div>
    <button class="btn btn-submit btn-block" [disabled]="!(barcode.valid) || barcode.pristine">Submit</button>
</form>

</div>
</div>

app.component.ts的一部分：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RestService } from "./services/rest.service";
import { ProductModel } from "./models/product.model";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('focusInput') focusInput: ElementRef;
barcode: string;
barcodeForm: FormGroup;
product: ProductModel;

    constructor(fb: FormBuilder, private restService: RestService){
        this.barcodeForm = fb.group({
            'barcode':['', [Validators.required, Validators.pattern("[0-9]+")]]
        });

    }

Answer 1

在angular2中，有两种形式：模板驱动和模型驱动。

模型驱动是在代码中定义表单的结构，并将输入绑定到其控件（通过formGroup和ngModel）。模板驱动使用ngModel并在模板上定义验证器。

我可以看到你的大部分代码都是针对模型驱动的，我认为无论如何都更好，但你的输入仍然有barcode.valid，你需要它吗？我没有看到你在barcode之外的任何地方使用它，因为disabled只是一个字符串，所以它不应该起作用。您希望将barcodeForms.controls['barcode'].valid属性绑定到ngModel，然后删除formControl的使用。它可能与FormControl冲突，因为它们都为该元素初始化let btn = UIButton(type: .system) let img = UIImage(named: "camera") btn.setImage(img, for: .normal) btn.contentMode = .scaleAspectFit btn.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0) btn.imageEdgeInsets = UIEdgeInsets(top: 5, left: 0, bottom: 5, right: 0) stackView.addArrangedSubview(btn) let btnHeight = NSLayoutConstraint(item: btn, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 40) NSLayoutConstraint.activate([btnHeight])实例。

非常基本的angular2形式没有得到验证

1 个答案: