我使用angular中的复选框来选择多个数据并且我试图在表单上获取复选框的值.相反,获取值im得到的值为true.我试过以下代码帮我提前谢谢
export class CreatesessionComponent implements OnInit {
form : FormGroup ;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.form = this.formBuilder.group({
useremail : new FormArray([
new FormControl('',Validators.required)
])
});
}
}
userdata是动态数组,我将从数据库中获取
<div class = "row" formArrayName="useremail; let k = index">
<div class="col-md-8 col-sm-5 col-xs-12 col-lg-8">
<div *ngFor="let data of userdata">
<div class="col-md-6">
<input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}}
</div>
</div>
</div>
</div>
我收到此错误 - "模板解析错误:NgControl没有提供者"
The error comes from this line of code
--> <select (ngModel)="currencies" (ngModelChange)="showPurchase($event)" class="annka-center" name="curencies">
<option *ngFor="let money of currencies; let i = index" (ngValue)="money" (click)="showPurchase(money)"> {{money.Currency}} </option>
</select>
上面的代码工作顺利,直到我将ReactiveFormsModule添加到我的应用程序.
我在这里尝试了解决方案
错误:没有NgControl Angular AOT的提供者
但这对我没有用.我正在使用Angular 4.
如何使用角度4中的反应形式使用触摸和有效属性.我已经在模板驱动的表单中使用,您可以将它<span class="text-muted" *ngIf="!fname.valid && fname.touched"> Please enter a valid first name</span>放在输入字段下面.我还了解到反应形式会更好,因为你必须在component.ts中编写逻辑.所以我希望它以反应形式实现,我坚持如何使用触摸和有效的属性.
HTML
<form [formGroup]="form" (ngSubmit)="onSignIn(form)">
<div class="form-group">
<input type="text" class="form-control" id="email" placeholder="Enter email" formControlName="email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" formControlName="password">
</div><button class="btn btn-primary btn-block" type="submit" [disabled]="!form.valid">Sign In</button>
</form>
TS
ngOnInit() {
this.form = this.formBuilder.group({
email: [null, [Validators.required, Validators.email]],
password: [null, Validators.required],
});
}
onSignIn(form: FormGroup){
const email = form.value.email;
const password = form.value.password;
this.authService.loginUser(email, password)
.subscribe(
data => {
this.router.navigate(['/settings']);
alert("Login Successful");
console.log(data);
},
error …我正在使用图表j来显示分组条形图并尝试隐藏工具提示的标题
代码生成栏
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [
{
label: "Blue",
backgroundColor: "blue",
data: [3,7,4]
},
{
label: "Red",
backgroundColor: "red",
data: [4,3,5]
},
{
label: "Green",
backgroundColor: "green",
data: [7,2,6]
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});
在工具提示中显示标签巧克力,香草,草莓和我试图隐藏标签与以下
通过将titlefontsize设置为0但它不起作用
tooltipTitleFontSize: 0
我已尝试使用工具提示回调它禁用标签蓝色,红色,绿色,但我不需要
tooltips: {
callbacks: {
label: function(tooltipItem) …我需要分别在选项卡tab2,tab3,tab4中显示a.php,b.php,c.php我已经编写了以下代码,但链接a.php,b.php,c.php没有显示在选项卡tab2,tab3,tab4分别代替,如果我点击tab2它重定向到a.php页面,但我需要以标签方式显示,如果我点击tab2它应该在tab2中显示a.php我应该更改什么才能显示选项卡上的链接？请帮助我提前谢谢
<script >
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
</script>
</head>
<body>
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Request Audit</a></li>
<li class=""><a href="#tab2" data-toggle="tab">Status</a></li>
<li class=""><a href="#tab3" data-toggle="tab">Settings</a></li>
<li class=""><a href="#tab4" data-toggle="tab">Help</a></li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
</body>
我有多个按钮我试图在获得响应后禁用该按钮.在获得响应后使用ngClass禁用按钮
<tr *ngFor="let item of data">
<td>{{item.username}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.phone}}</td>
<td><button type="button" [ngClass]="{disabled : item.username === name }" (click)="changestatus(item.username)" class="btn btn-success btn-xs" >Change Status</button></td>
</tr>
而我的changestatus功能
public name : string ;
changestatus(username : string){
this.httpService.changeuserstatus({uname : username }).subscribe(data => {
this.name = (data.data == 1) ? username : "no";
})
}
我将用户名值分配给name变量,如果两者匹配,我将禁用该按钮
问题是如果我在获得响应后点击第一个按钮它被禁用但是当我点击第二个按钮后获得响应第一个按钮被启用而第二个按钮被禁用.但是需要禁用这两个按钮.提前谢谢你
我正在尝试使用jQuery重新加载按钮上的特定元素,但是当我单击按钮时,整个页面将加载到此元素中.我尝试了以下代码,在此元素中加载整个页面.我想只加载特定元素.
<script>
$(document).ready(function() {
$("#button").click(function() {
$("#demo").load(location.href + "#demo");
});
});
</script>
</head>
<body>
<div id="example">
<p id="demo">hi</p>
<button id="button" type="button">press</button>
</div>
我尝试基于其他字段验证表单字段值,所以我写了一个自定义验证器,当我试图获取其他字段时抛出错误我尝试了以下代码,请帮助我提前感谢
export class CreatesessionComponent implements OnInit {
eventform : FormGroup ;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.eventform = this.formBuilder.group({
eventname : new FormControl(''[Validators.required,Validators.pattern('[A-Za-z]+')]),
userlive : new FormControl('',[Validators.required,this.maxuser]),
totaluser :new FormControl('',[Validators.required,this.totaluser])
});
}
totaluser(control : FormGroup) : {[s:string ]: boolean} {
console.log(control.controls['eventname'].value)
// if(control.value > 20){
// return { total : true };
// }
return null;
}
在控制台中出错,因为无法读取'eventname'未定义的属性
我需要获取<p>父div 中的标记文本,而不是来自子div.I尝试了以下代码,它获取父div和子div中的所有文本.
注意:我只需要获取文本父p1和父p2
Downvoters plz提到原因,以便我将来不会犯这个错误
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>parent p1</p>
<p>parent p2</p>
<div id="sub">
<p>child div</p>
<button type ="button">click</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var a = $(this).parent("div").attr("id");
console.log($("#"+a).parent("div").text());
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
3
推荐指数
1
解决办法
232
查看次数