标签: angular2-forms

我正在尝试使用Angular2表单验证和魔杖来检查是否已经采用了该值:

namesArray = Users[];
ngOnInit() {
 this.myForm = this.fb.group({
      name: ['', Validators.compose([
        Validators.required,
        this.nameValidator
      ])
      ],
 })
}

nameValidator(control:FormControl):{[key:string]:boolean} {
    console.log(this.namesArray);
    return null;
}

这给我一个错误:

无法读取未定义的属性'namesArray'

当我打印时this返回undefined.那么如何访问函数之外的数组呢？

我正在尝试实现取消功能,该功能应该恢复到表单中的上一个值,这些值在上次提交表单时出现.我正在尝试创建一个传递给表单的数据对象的副本,在提交函数中我将新值替换为副本,在"取消"功能中,我将复制值替换为原始值.但是当我调用取消功能时,我没有得到以前的值.

带错误的工作代码:http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt？p = preview

我基于Angualr 2表单的模板驱动代码实现了取消功能:http://plnkr.co/edit/LCAPYTZElQDjrSgh3xnT？p = preview

Typescript类代码:

import { Component, Input, OnInit }  from '@angular/core';
import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { QuestionBase }                 from './question-base';
import { QuestionControlService }       from './question-control.service';

@Component({
  selector: 'dynamic-form',
  templateUrl: 'app/dynamic-form.component.html',
  directives: [REACTIVE_FORM_DIRECTIVES],
  providers:  [QuestionControlService]
})
export class DynamicFormComponent implements OnInit {

  @Input() questions: QuestionBase<any>[] = [];
  form: FormGroup;
  payLoad:object;
  questiont: QuestionBase<any>;
  constructor(private qcs: QuestionControlService) {  }
  ngOnInit() {
    this.form = this.qcs.toFormGroup(this.questions);
    console.log("Form Init",this.questions);
    this.questiont=this.questions; …

我向模板添加了模式属性

<input class="form-control" type="text" id="elementName"
                                   [(ngModel)]="elementName" name="elementName"
                                   (input)="onElementNameChanged()" #name="ngModel" required pattern="[A-Za-z0-9_)*\S]*" >

如何添加输入不正确时显示的消息？

像这样的东西不会工作：

<div [hidden]="!name.errors.pattern"
     class="alert alert-danger">
     Name must match pattern
</div>

我是 angular2 的新手，并尝试将对象结果绑定到 html 模板。我可以使用 Observable 从 srtvice 获取数据。我也可以在控制台和模板中看到 JSON 数据。但是当我尝试从结果 json 访问属性时，它没有显示如下图所示的数据。

下面是我的该组件的代码，

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { JuniorService } from '../Service/service.junior';
import { Employee } from '../../models/Employee';


@Component({
  selector: 'my-getjunior',
  template: `<h1>Details of {{id}} 
  <hr/>
  JSON :  {{Junior | json}} 
  <hr/>
  Summary :  {{junior?.summary}}</h1>`
  //templateUrl: './app/Junior/get/junior.get.html'
})
export class JuniorGet implements OnInit
 {

errorMessage: string;
Junior: Employee;
id: number;
private sub: any;

  constructor (private juniorService: JuniorService, private route: …

单击提交按钮后，在浏览器控制台上出现以下错误。

在此应用程序中，我试图在下面获取有关学生上传的代码的信息。我无法找到为什么在控制台上显示此错误。 我已经正确添加了formControlName。

1. 零件

           import { Component, OnInit, Inject } from '@angular/core';
           import { FormGroup, FormControl, Validators, FormBuilder, AbstractControl } from '@angular/forms';
   
           @Component({
             selector: 'app-new-record',
             templateUrl: './new-record.component.html',
             styleUrls: ['./new-record.component.css']
           })
           export class NewRecordComponent implements OnInit {
             myFormGroup: FormGroup;
             constructor(private formBuilder: FormBuilder) {
               this.myFormGroup = this.formBuilder.group({
                 name: new FormControl('', Validators.compose([
                   Validators.required
                 ])),
                 claz: new FormControl('BCA'),
                 admissionYear: new FormControl(Validators.compose([Validators.required]))
               });
             }
   
             ngOnInit() {
   
             }
   
             onSubmit(student) {
               console.log('onSubmit called !');
             }
   
           }
   

   Run Code Online (Sandbox Code Playgroud)

   2. 模板

          <form [formGroup]="myFormGroup"
          (ngSubmit)="onSubmit(form.value)">
              <div class="form-group">
                  <label for="claz">Class:</label> <select name="claz" formControlName="claz"> …

      Run Code Online (Sandbox Code Playgroud)

我正在将应用程序从 AngularJS 升级到 Angular 5。我想出了大部分事情，但仍然处于学习过程中，我无法找出将自动完成列表连接到后端的最佳方法。Material Design 网站也没有提到这一点。

下面是代码现在的样子：

  <mat-form-field>

    // chips are up here

    <mat-autocomplete (optionSelected)="chipAdd($event,field)" #auto="matAutocomplete">
      <mat-option [value]="opt.id" *ngFor="let opt of field.options">
        {{ opt.name }}
      </mat-option>
    </mat-autocomplete>

  </mat-form-field>

我已经删除了 mat-chip-list 并且只包含了相关的代码。

所以我的问题是......现在我从 field.options 获取选项——而不是这个，一旦我开始输入，我如何从 http 后端动态加载它们？

谢谢你的帮助！:)

我想知道当我在另一个formBuilder组中有一个数组时，如何使用反应形式使用“ setControl”和“ get”。例如：

this.formulario = this.formBuilder.group({
  title: [this.racPessoa.title, [Validators.required]],
  description: [this.racPessoa.description, [Validators.required]],
  person: this.formBuilder.group({
    idPerson:[this.racPessoa.person.idPerson],
    name:[this.racPessoa.person.nome],
    personDocument: this.formBuilder.array([])
  }),
});

在上述情况下，如果我想使用“标题”，则可以编写：

this.formulario.setControl('title', something);
this.formulario.get('title');

但是当我要使用一个人内部的“ personDocument”来处理时，我不知道如何在上面写两个句子

我尝试使用：

this.formulario.setControl('person.personDocument', something);
this.formulario.get('person.personDocument')

但这是行不通的。

在这里，我在表格上实现了小型搜索过滤器，但我的要求是它应该搜索整个表格而不是页面内？

搜索

<label> Search FRom Table:</label> <input (change)="someval($event.target.value)">          


someval(value){
   let data=JSON.stringify(value);
   console.log(data.length);
   this.auction.find(e=>e.uniqueid=data);
   this.GetDashBoardData();
}
GetDashBoardData(){
    var somedata= this.globalService.getBasicInfoData();
    this.auctionRequest = {    
      "loginId": this.userdata.LoginID
    }; 
    return this.httpService.dashbordTheUser2(this.auctionRequest).subscribe((response) => {
      this.auction = response.data;
}

在这里我稍微改变一下，就像当我在文本框中输入一些文本时，它会在This.auction数组中输入 ，但我不知道如何在表中绑定它

<tr *ngFor="let value of pagedItems">
                     <td>{{value.name}}</td>

我必须在我的应用程序中实现表单验证。我正在使用 angular 4。我的应用程序中还有 10 个表单。我不知道我的问题是否有效。我真的对这个实现感到困惑。

我的问题：我需要在表单字段中添加验证，包括必填和验证，如电子邮件、电话号码等，如果用户输入表单用户知道某些字段用户可能不知道需要填写其他字段的内容。但是需要保存有效字段，需要在表单中显示错误信息。

我如何在前端实现我使用 Angular 4，后端使用 nodejs

我有一个像这样的空对象数组groupList:any = {}，现在我想将一个对象推入其中。我试图将名称和描述作为对象。