标签: angular4-forms

我想单独打开登录页面.但它在routeroutlet页面内部开放.请帮忙.

截图下方的PFB供您参考.

请参考下面的代码.

App.Routing.ts:

import { Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

export const AppRoute: Routes = [
    { path: '', redirectTo: 'HomeComponent', pathMatch: 'full' },
    { path: 'login', component: LoginCoHomeComponentmponent },
    { path: 'home', component: HomeComponent },

];

App.Component.html

<div id="wrapper">
   <app-top-bar></app-top-bar>
   <router-outlet></router-outlet>
</div>

App.Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgModule } …

<tbody>
    <tr *ngFor="let trxList of trxNumberList; let i= index">
        <td>{{i}}</td>
        <td>
            <input type="text" name="trxNumber-{{i}}" class="form-control" minlength="1" maxlength="20" [(ngModel)]="trxList.trxNumber" />
        </td>
    </tr>
</tbody>

这是我的表格主体，当我在第一个输入框中键入时，所有其他输入都绑定到该值。附图片。请帮忙。

编辑：

组件代码：

trxNumberObj = new Transaction;

ngOnInit() { 
  for(var i= 0 ; i <= 10; i++ ){ 
    this.trxNumberObj.count = i; 
    this.trxNumberList.push(this.trxNumberObj); 
  } 
}

我使用Angular Material 2 Stepper设置了一个线性步进器.

我有不同组件中的表单(组件-a,组件-b,组件-c).在我的主容器组件(容器组件)中,我希望线性步进器在其表单有效时"逐步"遍历每个组件.

是否有某种功能可以stepControl与步进器进行对话以使其正常工作？

我附上了步进器的文档和应用程序的StackBlitz版本.此外,我也有工作的回购链接.

Material Stepper组件:https://material.angular.io/components/stepper/overview

StackBlitz:https://stackblitz.com/edit/angular-material2-issue-mjmu9u ？ file = app/app.component.ts

Github:https://github.com/sam11385

我正在尝试将外部库应用于日期时间选择器.我收到如下错误

ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'dateTimeDeparture'
Error: No value accessor for form control with name: 'dateTimeDeparture'

我的代码如下:

模板:

<owl-dateTime-input [(ngModel)]="flightDetails.dateTimeDeparture" name="dateTimeDeparture" [locale]="en" required></owl-dateTime-input>  

零件:

this.en = {
    firstDayOfWeek: 0,
    dayNames: ["Sunday", "Monday", "Tuesday","Wednesday", "Thursday", "Friday", "Saturday"],
    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
    monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
};

this.flightDetails = {
    dateTimeDeparture: new Date(2017, 8, …

我正在使用组件FormComponent构建一个应用程序.我正在使用角度核心的反应形式模块,并创建一个自定义验证器.该函数通过使用它来调用另一个函数 - 因为我认为它将引用FormComponent,但它引用的是'undefined'(？)

onInit中的代码定义FormGroup和FormControl,并在其外部定义函数

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  formInsurance:FormGroup;
  private id:FormControl;


  constructor(){}


  ngOnInit() {

    this.id = new FormControl('',[
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10),
      Validators.pattern('^[0-9]+(-[0-9]+)+$|^[0-9]+$'),
      this.foo
    ]);


    this.formInsurance = new FormGroup({
      id:this.id      
    })


  }


  foo(control:FormControl){
  this.boo();
  if(control.value){
    return {
      objToReturn: {
          returned: name
      }
    };
  } …

我在表格中上传了文件。我还需要创建发布请求以将此上传文件和其他一些表单字段作为后端。

下面是我的代码：

      fileChange(event) {

        const fileList: FileList = event.target.files;
        if (fileList.length > 0) {
          this.file = fileList[0];
          this.form.get('file_upload').setValue(this.file);
        }
      }


      onClick(){

        const val = this.form.value;

             const testData = {
              'file_upload': this.file,
              'id': val.id,
              'name' : val.name,
              'code': val.code,
          };

        this.http.post('https://url', testData,
          .subscribe(
            response => {
              console.log(response);
            });
        }

除上载文件外，每个字段值都将发送到后端。我是否将上传的文件以及表单字段发送到后端？让我知道是否需要其他信息。

当我们继续在文本框中输入内容时，电子邮件验证被触发。我希望当用户将焦点移到文本框之外时触发此验证

下面是我的代码：

<input class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
 name="Email" type="email" [(ngModel)]="model.Email" #Email="ngModel" required>

<div class="red" *ngIf="Email.errors && (Email.dirty || Email.touched)">
     <div [hidden]="!Email.errors.pattern">
         Please enter a valid email.
     </div>
</div>

请建议我该如何实现。提前致谢。

我正在尝试设置用户表单验证，用户必须输入两个字段之一，移动或电子邮件字段

添加访客反应表单 Html：

<form class="new_guest" id="new_guest" [formGroup]="addGuestForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
                <input placeholder="Enter guest name" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="name"
                    id="guest_name" autocomplete="off">
            </div>
            <div class="form-group">
                <input placeholder="Enter guest email" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="email"
                    id="guest_email" autocomplete="off">
            </div>
            <div class="form-group">
                <input placeholder="Mobile Number, If any" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="mobile"
                    id="guest_mobile" autocomplete="off">
            </div>
            <input type="submit" class="btn btn-default btn-block" id="add_guest" value="ADD GUEST" [disabled]="!addGuestForm.valid">
        </form

添加来宾初始化：

this.addGuestForm = new FormGroup({
  'name': new FormControl(null, Validators.required),
  'email': new FormControl(null, Validators.email),
  'mobile': new FormControl(null)
})

任何人都可以帮忙吗？

我有一个公司类，它有一个总部的地址字段。地址是一个接口，它有另一个对象，国家，这是另一个接口。在我的数据库中，我存储了所有国家。我有一个编辑选定公司的视图，在那里我可以设置或更改总部的地址，并为国家/地区创建了一个 mat-select：

<mat-select [(ngModel)]="company.headquarter.country">
    <mat-option *ngFor="let country of companyService.countries" [value]="country">
        {{country.name}}
    </mat-option>
</mat-select>

此代码将所选国家/地区保存到总部的国家/地区字段，但如果我想编辑同一家公司，则 mat-select 不会显示实际值。我怎么解决这个问题？

编辑：

如果我将 ngModel 更改为 company.headquarter.country.id 并将 [value] 更改为 country.id，那么它可以正常工作，但是要存储国家/地区的代码或名称，我必须编写一个方法，该方法将通过在 companyService.countries 数组中输入 id 并将这个国家设置为 company.headquarter.country 的字段。所以这不是一个好的解决方案。

我是角度2的新手.我需要在按钮点击上标记复选框.我在循环中有一些复选框

 <tr *ngFor="let roleObj of roleNameList">
      <td>
         <input type="checkbox"   id ={{roleObj.roleID}} />
     </td>
     <td>{{roleObj.roleName}}</td>
  </tr>

我有一个选定角色的阵列,只需要在编辑按钮单击上标记这些复选框.所以我在javascript中做了同样的事情

 document.getElementById("role").checked

但是在角度4中没有这样的属性.

我搜索并发现有一个属性绑定

[checked] ="somevariable"

但问题是相同的属性[checked] ="somevariable"将添加所有复选框.结果是当我将somevariable指定为true时.它将标记所有复选框.

我在jquery中的其他解决方案就像

$(document.getElementById(role)).prop('checked', true);

但可能会产生问题,我不确定请纠正我.

请帮我.任何线索或逻辑都与我的日子相同.