小编Kam*_*aja的帖子

我正在尝试登录表单组件,但我无法读取表单数据.

当我尝试在控制台上编写用户名时,'undefined'写道.

一切似乎都很平常,但表格数据并不是组件.

以下是html代码:

<form (ngSubmit)="onSubmit(myForm)"
      #myForm="ngForm"
      class="form-signin">
    <div class="form-group">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text"
               id="inputUsername"
               name="inputUsername"
               class="form-control"
               placeholder="User Name"
               required>
        <input type="password"
               id="inputPassword"
               name="inputPassword"
               class="form-control"
               placeholder="Password" >
    </div>
    <button class="btn btn-lg btn-primary btn-block"
            type="submit">Sign in</button>
</form>

组件ts:

@Component({
    selector: 'signin',
    templateUrl: './signin.component.html',
    encapsulation: ViewEncapsulation.None
})
export class SigninComponent implements OnInit{
    constructor(){}

    ngOnInit(){ }

    onSubmit(form: NgForm){
        console.log(form.value.inputUsername);
    }
}

提前致谢.

我有一个NgModule位于/src文件夹外部的Angular CLI项目(最终这个NgModule将打包为npm模块,但现在我只是把它留在了外面/src).

我正在尝试为这个NgModule编写单元测试,但ng test似乎没有拾取.spec.ts文件/src夹之外的文件.

我试过改变路径/src/test.ts:

// Original
const context = require.context('./', true, /\.spec\.ts$/);

// Does not work
const context = require.context('../', true, /\.spec\.ts$/);

// Does not work
const context = require.context('/absolute/path/to/ngmodule', true, /\.spec\.ts$/);

但是我收到一个错误: Module build failed: Error: /absolute/path/to/file.spec.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

我也尝试在以下include属性中添加我的NgModule路径tsconfig.spec.json:

"include": [ …

我正在使用Angular Reactive表单，已向FormArray中动态添加了两个FormControl，但是在将它们与formControlName绑定时，却无法在模板中引用这些FormControl。在模板中，我将循环索引变量“ i”分配给formControlName，但它不起作用。通过将控件与formControlName绑定，可以得到“具有路径的窗体控件没有值访问器”。这是我的组件类代码：

export class Control {
  constructor(public controlType?: string, public label?: string, public required?: boolean, public placeholder?: string,
    public options?: string[], public value?: string) { }
}

export class FormComponent implements OnInit {
  reviewForm: FormGroup;

  constructor(public formService: FormService, public dialog: MdDialog) { }


  selectedControl: any = null;
  label: string;

  ngOnInit() {
    this.reviewForm = new FormGroup({
      'controlArray': new FormArray([
      ])
    });
  }

  addControl() {
    const myControl: Control = new Control(this.selectedControl.name, this.label, this.isRequired,
      this.selectedControl.attributes.value, this.selectedControl.attributes.options, 'null');
    var control: FormControl = new …

我想知道是否有可能以模糊的反应形式进行验证。目前，您可以进行设置，updateOn: "blur"但是输入字段的值不会在输入时更新。在我的情况下，我需要在每次击键时更新值，因为我会用它进行计算并将结果显示给用户。验证应仅在模糊时进行。

谢谢。

编辑：

我使用FormBuilder，一些内置的验证器和一些自定义的验证器。示例代码：

let formToMake = {
  purpose: [null, Validators.required],
  registrationDate: this.fb.group({
    day: [null, Validators.required],
    month: [null, Validators.required],
    year: [null, Validators.required]
  }),
  isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]
};

如果我要使用模糊事件，则需要手动进行所有验证，但我认为这不是一个好方法。

我是Spring引导框架中使用JUnit和Mockito进行单元测试的新手.我想测试一下这个方法.如何测试POST Request方法:

// add Employee
@RequestMapping(method = RequestMethod.POST)
public void addEmployee(@RequestBody Employee employee){
    this.employeeService.addEmployee(employee);
}

先感谢您

我正在尝试向表单添加转换，以便当用户选择问题的特定答案时，它将动态显示下一个问题。目前我的它看起来像这样：

<input type="text" :value="vueModel.question1" />
<div v-if="vueModel.question1 === 'hello'">
    //Do something
</div>
<div v-else-if="vueModel.question1 === 'hihi'">
    //Do something
</div>
<div v-else>
    //Do something
</div>

我的问题是，我应该以这种方式添加过渡吗？（为什么？）

<input type="text" :value="vueModel.question1" />
<transition-group name="slide-fade" mode="in-out">
    <div v-if="vueModel.question1 === 'hello'" key="key1">
        //Do something
    </div>
    <div v-else-if="vueModel.question1 === 'hihi'" key="key2">
        //Do something
    </div>
    <div v-else key="key3">
        //Do something
    </div>
</transition-group>

或者，这样？（为什么？）

<input type="text" :value="vueModel.question1" />
<transition name="slide-fade" mode="in-out">
    <div v-if="vueModel.question1 === 'hello'" key="key1">
        //Do something
    </div>
    <div v-else-if="vueModel.question1 === 'hihi'" key="key2">
        //Do something
    </div>
    <div …

我使用角材料步进器。我需要在移动视图上设置填充 0。在开发人员控制台上，我可以通过更改.mat-horizontal-content-container. 但是当我添加时它不起作用.mat-horizontal-content-container{padding:0 !important;}这个问题有什么解决方案吗？

这是演示plnkr。我正在尝试为具有文本框和验证按钮的OTP输入实现自定义异步验证器。我只想在用户单击验证OTP按钮或表单提交按钮时验证输入。目前，验证是针对文本更改事件进行的，因此无法正常工作。 表单HTML：

<form [formGroup]="registrationForm" (ngSubmit)="registrationForm.valid && submitRegistration(registrationForm.value)" novalidate>
  <fieldset class="form-group">
    <label for="e-mail">Mobile</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Mobile" formControlName="mobile">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Send OTP</button>
      </span>
    </div>
    <div class="form-text error" *ngIf="registrationForm.controls.mobile.touched">
      <div *ngIf="registrationForm.controls.mobile.hasError('required')">Mobile is required.</div>
    </div>
  </fieldset>
  <fieldset class="form-group">
    <label for="e-mail">Verify OTP</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="OTP" formControlName="otp">
      <span class="input-group-btn">
        <button class="btn btn-secondary" (click)="veryOTPAsyn(otp)" type="button">Verify</button>
      </span>
    </div>
    <div class="form-text error" *ngIf="registrationForm.controls.otp.touched">
      <div *ngIf="registrationForm.controls.otp.hasError('required')">OTP is required.</div>
      <div *ngIf="registrationForm.controls.otp.hasError('invalidOtp')">OTP is invalid.</div>
    </div>
  </fieldset>
  <button class='btn btn-primary' type='submit' [disabled]='!registrationForm.valid'>Submit …

我正在尝试为我的应用程序创建一个自定义 Spinner 组件，所以我创建了

spinner.component.ts

export class SpinnerComponent implements AfterViewInit {

    @ViewChild("spinner") spinner: ElementRef;

    constructor() { }

    ngAfterViewInit(): void {
        this.spinner.nativeElement.style.display = "none";
    }

    public show = (): void => { this.spinner.nativeElement.style.display = "block"; };

    public hide = (): void => { this.spinner.nativeElement.style.display = "none"; };

}

spinner.component.ts

<img #spinner src="assets/images/dotSpinner.gif" class="loading"/>

我试图在我的其他组件中控制这个微调器，比如

样本.component.ts

import { SpinnerComponent } from "../spinner/spinner.component";

export class SimpleComponent {

    private spinner: SpinnerComponent = new SpinnerComponent();

    constructor() {}

    actionHandler = (data: any): void => {
        this.spinner.show();
        this.clientActionService.subscribe( …

我见过的React上下文的每个例子都是这样的：

theme-context.js

// Make sure the shape of the default value passed to
// createContext matches the shape that the consumers expect!
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

您的文件包含上下文的实例。然后使用将其传递到组件中useContext(ThemeContext)。

我的问题是，如果你这样做并且它始终是单例，那么为什么不直接从单例导入上下文中的内容呢？基本上我想知道是否有一次您创建了多个上下文实例，例如为了测试，您可能会在每次测试时创建一个新实例，类似的事情。