Question

我是angular2中的新手，我想创建一个表单来插入数据我的问题是当我点击创建它显示＆＃34;浏览器同步已断开＆＃34;最初两个字段名称和地址显示我给他们的值，但邮政编码没有。最后有一个错误错误：＆＃34;找不到路径控制：＆＃39;地址 - ＆gt; ADRESS＆＃39; 这是我的代码 component.html

    <div class="container">
<h3>Add user:</h3>
<form [formGroup]="myForm" novalidate (ngSubmit)="Create(myForm.value, myForm.valid)">
<ul>
   <div class="form-group">
       <label for="name">name:</label> <input type="text" class="form-control" formControlName="name"><br/><small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
        name is required.
          </small>
             </div>

 <div class="form-group" formGroupName="adress">
      <label for="">adress</label>
      <input type="text" class="form-control" formControlName="street">
      <small [hidden]="myForm.controls.adress.controls.street.valid || (myForm.controls.adress.controls.street.pristine && !submitted)" class="text-danger">
            street required
          </small>


<div class="form-group" formGroupName="adress">
      <label for="">postcode</label>
      <input type="text" class="form-control" formControlName="postcode">
    </div>

<button  class="btn btn-default" (click)="CreateVersion()">create</button> 
       </div>

   </ul>
   </form>
   </div>

component.ts

    import { Component ,OnInit} from '@angular/core';
import {Service} from '../services/service.component';
import { FormsModule,FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import {Observable} from 'rxjs/Rx';
import { User } from './user.interface';


@Component({
moduleId: module.id,
selector: 'version',
templateUrl:'./version.component.html',
styleUrls:['./version.component.css']
})

export class VersionComponent implements OnInit{

public myForm: FormGroup;


constructor(){};

    ngOnInit() {

        this.myForm = new FormGroup({
          name: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
          adress: new FormGroup({
                street: new FormControl('', <any>Validators.required),
                 postcode     : new FormControl('')
            })
      });

     const people = {
                name: 'Jae',
                adress: {
                street: 'High street',
                postcode: '94043'
            }
         };

         (<FormGroup>this.myForm)
             .setValue(people, { onlySelf: true });
}
  Create(conf: User, isValid: boolean) {
        this.submitted = true;
        console.log(model, isValid);
    }
}

用户

export interface User {
 name: string;
  adress?: {
  street?: string;
  postcode?: string;
   }
  }

Answer 1

我认为这是因为您已将邮政编码包裹formGroupName两次，因此您的HTML应如下： -

<div class="container">
    <h3>Add user:</h3>
    <form [formGroup]="myForm" novalidate (ngSubmit)="Create(myForm.value, myForm.valid)">
        <ul>
            <div class="form-group">
                <label for="name">name:</label> <input type="text" class="form-control" formControlName="name"><br/>
                <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)"
                       class="text-danger">
                    name is required.
                </small>
            </div>

            <div class="form-group" formGroupName="adress">
                <label for="">adress</label>
                <input type="text" class="form-control" formControlName="street">
                <small [hidden]="myForm.controls.adress.controls.street.valid || (myForm.controls.adress.controls.street.pristine && !submitted)"
                       class="text-danger">
                    street required
                </small>

                <label for="">postcode</label>
                <input type="text" class="form-control" formControlName="postcode">

                <button class="btn btn-default" (click)="CreateVersion()">create</button>
            </div>

        </ul>
    </form>
</div>

angular2表单验证错误消息

1 个答案: